1

我正在尝试使 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 与不期望的内容一起消失。任何帮助，将不胜感激！谢谢！

4

3 回答 3

1

你已经链接了你的fadein()and 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);
})

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

于 2010-02-18T10:53:00.393 回答
0

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

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

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

于 2010-02-18T10:54:52.297 回答
0 
<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也附加了，

希望有用，

干杯!

于 2010-06-19T16:56:34.467 回答