0

目的の Divをクリックしたときに、非表示にする前に Divをアニメーション化/強調表示する方法は?

Here is my JS DEMO:

http://jsfiddle.net/L7tK3/17/

ClickedまたはSelected Divを最初にアニメーション化または強調表示してから、非表示にする必要があります。

HTML は次のとおりです。

<div id="response_1" class="container">
    <span id="1" class="hide_content">
        <a href="javascript:void(0);">Click Here To Hide First Div</a>
    </span>  
</div>

<br>

<div id="response_2" class="container">
    <span id="2" class="hide_content">
        <a href="javascript:void(0);">Click Here To Hide Second Div</a>
    </span>  
</div>

<br>

<div id="response_3" class="container">
    <span id="3" class="hide_content">
        <a href="javascript:void(0);">Click Here To Hide Third Div</a>
    </span>  
</div>

CSSは次のとおりです。

.container{
    border:#666666 solid 1px;  
    padding:4px;
}

ここにJSがあります：

$('.hide_content').click(function ()
                         {
                           var current_number = $(this).attr("id");  
                           $('#response_'+current_number).hide();
                         });
4

2 に答える 2

1

jsFiddle デモ

$('.hide_content').click(function () {
    $(this).closest(".container").animate({ "background-color": "yellow" }, 500, "linear").
            delay().fadeOut(500)
});

背景色をアニメーション化するには、jQuery.Color プラグイン (または jQuery UI) が必要です。

于 2013-09-15T17:21:10.483 に答える