1

私は 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/ ) にあります。この問題にどのようにアプローチできるかについて考えている人はいますか?

4

3 に答える 3

0 
$(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);
});
于 2013-09-26T09:51:34.850 に答える
0

これはうまくいく解決策ですが、おそらくもっと良い方法があります：

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

于 2013-09-26T09:04:57.233 に答える