如何在 jquery 中显示和消失 div 背景颜色？答案

【问题标题】：how to make appear and disappear div background color in jquery?如何在 jquery 中显示和消失 div 背景颜色？
【发布时间】：2011-01-18 06:40:36
【问题描述】：

我正在尝试使 div 的背景颜色出现然后消失，就像来来往往的闪光灯一样，但直到现在都没有成功。在单击一个 div 时，我试图为另一个 div 的背景颜色赋予闪光效果。

到目前为止，我的jquery知识已经到了如下代码：

         $("div.first_div").click(function(){
              $("#second_div_ID").fadeIn(30).css("background-color", 'blue')
              .fadeOut(1000).css("background-color", 'blue');
          });   });

但是发生的情况是整个第二个 div 连同不期望的内容一起消失了。任何帮助，将不胜感激！谢谢！

【问题讨论】：

标签： jquery flash html show highlight

【解决方案1】：

你已经链接了你的fadein() 和fadeout()：

$("#second_div_ID").fadeIn(30).css("background-color", 'blue').fadeOut(1000).css("background-color", 'blue');

因此它们很可能被同步调用。

您也许也在寻找animate():

确保一个在另一个完成时被调用。试试这个：

var $second_div = $("#second_div_ID");
var oldBGColour = $second_div.css('background-color');

$second_div.animate({'background-color': 'blue'}, 30, function(){
    $(this).animate({background-color: oldBGColour}, 1000);
})

未经过测试，但您需要类似上述的内容

【讨论】：

【解决方案2】：

当你使用fadeIn 和fadeOut 时，你不仅仅在该div 的背景上使用out，而是在包括所有子元素在内的整个元素上使用。

因此，您需要将背景颜色设置为“蓝色”，然后再将其设置为透明。在两者之间，您可能需要稍作延迟。这可以通过这个插件来完成：http://www.evanbot.com/article/jquery-delay-plugin/4

也许你也可以使用这个插件：http://plugins.jquery.com/project/color
它使 jQuery 能够在颜色上执行动画，也许这就是你所需要的。

【讨论】：

【解决方案3】：

<div class="quick-alert">Alert! Watch me before it's too late!</div>

.quick-alert {
   width: 50%;
   margin: 1em 0;
   padding: .5em;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
 }

$(document).ready(function() {
  $('#show-alert').click(function() {
    $('<div class="quick-alert">Alert! Watch me before it\'s too late!</div>')
    .insertAfter( $(this) )
    .fadeIn('slow')
    .animate({opacity: 1.0}, 3000)
    .fadeOut('slow', function() {
      $(this).remove();
    });
  });
});

DIV是显示对象，一旦你点击按钮（ID为#show-alert），这个消息就会出现，3秒后自动消失。它的css也附上了，

希望有用，

干杯！

【讨论】：