Question

我正在使用Twitter引导程序。我的按钮的类通常是btn btn-default，我想将类更改为btn btn-success，因此按钮为绿色。然后一个漂亮的小3脉动，然后返回默认颜色。

到目前为止我得到的最好的是：

$('#myBtn').removeClass('btn btn-default').addClass('btn btn-success');

for(i=0;i<3;i++) {
    $(#myBtn).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }

$('#myBtn').removeClass('btn btn-success').addClass('btn btn-default');

这个问题是它会在动画继续时立即将颜色恢复为默认值。有任何想法吗？我看过JQuery Color，并没有任何类似的东西。

Answer 1

淡入淡出异步发生，因此您需要等到它们再次转换之前完成。而不是一个循环，我认为你可以通过链接一起来欺骗这个，并在完成最后一次延迟后做最后一步。请注意，“慢”= 600毫秒转换，因此1200个值......

$('#myBtn').removeClass('btn btn-default').addClass('btn btn-success');

$('#myBtn').fadeTo('slow', 0.5).fadeTo('slow', 1.0).delay(1200)
         .fadeTo('slow', 0.5).fadeTo('slow', 1.0).delay(1200)
         .fadeTo('slow', 0.5).fadeTo('slow', 1.0).delay(1200, 
         function() {
           $('#myBtn').removeClass('btn btn-success').addClass('btn btn-default');
         });

http://jsfiddle.net/8C3SA/

如果你想要一些更整洁的东西（以jQuery插件的形式），请在这里查看@Doug Neiner的答案：jQuery: fade div in and out multiple times

Answer 2

你必须使用动画功能。

这是一个只有一个＆＃34; fadding＆＃34;

的示例

http://jsfiddle.net/wVmG7/1/

$( "#btnTest" ).click(function(){
  $('#myBtn').removeClass('btn btn-default').addClass('btn btn-success');
  $( "#myBtn" ).animate({
    opacity: 0.3
  }, 1000, function() {
    $( this ).after($( "#myBtn" ).animate({
        opacity: 1
    }, 1000, function() {
            $( this ).after( $( "#myBtn" ).removeClass('btn btn-success').addClass('btn btn-default') )
    })
    )
  });
});

Twitter Bootstrap Pulsate有不同的颜色？

2 个答案: