如何在jquery中使div背景颜色出现和消失？

Question

我正在尝试让 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 以及意外的内容消失了。任何帮助将不胜感激！谢谢！

Answer 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);
})

未经测试，但你会想要类似上面的东西

Answer 2

当您使用 fadeIn 和 fadeOut 时，您不仅会在该 div 的背景上使用 out，还会在整个元素（包括所有子元素）上使用 out。

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

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

Answer 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也附上了，

希望有用，

干杯！