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的背景上使用，而是在包括所有子元素的整个元素上使用。

因此，您需要将背景颜色设置为“蓝色”，然后将其设置为透明。在两者之间你可能想稍微延迟。这可以通过以下插件来完成：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），这个msg就会出现，3秒后会自动消失。它的css也附上了，

希望有用，

干杯！

如何在jquery中显示和消除div背景颜色？

3 个答案: