突出显示和隐藏 DIV onClick答案

【问题标题】：Highlight and Hide DIV onClick突出显示和隐藏 DIV onClick
【发布时间】：2013-09-15 17:12:08
【问题描述】：

当点击desired 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();
                         });

【问题讨论】：

好的。现在请从我的帖子中删除降级。谢谢

标签： javascript jquery html onclick jquery-animate

【解决方案1】：

jsFiddle Demo

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

动画背景颜色需要 jQuery.Color 插件（或 jQuery UI）。

【讨论】：

我想突出显示 DIV 而不是文本
如果我们只改变边框颜色呢？
@Necromancer 和 animate 你可以（几乎）更改任何你想要的 CSS 设置。

【解决方案2】：

快速的谷歌搜索立即将我带到这里： http://api.jquery.com/hide/

.hide( duration [, easing ] [, complete ] )

来吧。

【讨论】：