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");
    var pulse = setTimeout(function () {
        pulsate();
    }, 3000);

    var = pulsate_repeat ;
    var pulsate = function() {
        p.animate({
            'color': 'red',
            'opacity': 1
        }, function () {
            p.animate({
            'color': 'black',
                'opacity': 0.2});
        });
        //pulsate();
        pulsate_repeat = setTimeout(function () {
            pulsate();
        }, 500);
    };

    //after 30 secs stop repeating
    setTimeout(function () {
        clearTimeout(pulsate_repeat);
    }, 30000);
});

Answer 2

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

$(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/

Answer 3

这应该可以，只需pulsate按照您想要的方式自定义 CSS 中的类：

function pulsateElement(element){
    element.removeClass('pulsate');
    setTimeout(function(){
        element.addClass('pulsate');
        setTimeout(function(){
            pulsateElement(element);
        },500);
    },700);
}