javascript - 延迟 jQuery 脉动与计时器相结合

Question

我正在用 Javascript 玩弄 jQuery 动画和计时器，我希望在页面上出现一个小句子(即从 1->0.2、0.2->1 更改不透明度)几秒钟后页面加载，脉动几秒钟，停止脉动并将颜色从黑色变为红色。

<div class="pulsate">Test</div>

<script>
$(function() {
  var p = $(".pulsate");
  for(var i=0; i<3; i++) {
    p.animate({opacity: 0.2}, 1000, 'linear')
     .animate({opacity: 1}, 1000, 'linear');
  }
});
</script>

我当前的工作位于以下 JSFiddle ( http://jsfiddle.net/nLqmz/ )。有人对我如何解决这个问题有任何想法吗？

Answer 1

这是一个可行的解决方案，但可能有更好的方法:

$(function() {
var p = $(".pulsate"),
    faded = false,
    stopFading = false;
setTimeout(function(){
    toggleFade();
    setTimeout(function(){
        stopFading = true;  
        p.animate({'color': 'red', 'opacity' : 1},{'duration' : 'fast'});
    }, 3000);
}, 3000);

function toggleFade() {
    if (!stopFading) {
        p.animate({
            'opacity': faded ? 0.2 : 1
        },{
            'duration' : 500, 
            'complete' : function(){
                faded = faded ? false : true;
                toggleFade();
            }
        });
    }
}

});

http://jsfiddle.net/nLqmz/2/