0

次のコードがある場合、フェードインとフェードアウトの後に一時停止することはできません:

$(document).ready(function () {
    $('#signupButtonFlash').each(function (i) {
        // Get the image, set the count and an interval.
        var img = $('.bttn_play');
        img[0].$count = 0;
        img[0].$interval = setInterval(function () {
            // Animate the opacity over .2 seconds
            img.animate({
                opacity: .3
            }, 400, function ()

            {
                // When finished, animate it back to solid.
                img.animate({
                    opacity: 1
                }, 400);

            });

            // Clear the interval once we've reached 1000.
            if (++img[0].$count >= 1000) {
                clearInterval(img[0].$interval);
            }
        }, 1000);
    });
});
4

3 に答える 3

0

これはあなたが望むものを達成します。他の人が提案したように使用することもできますがdelay、前のアニメーションがまだ実行されている間にトリガーされる間隔が心配です. このコードは代わりに、(たとえば) 1000 ミリ秒ごとに間隔をトリガーし、200 ミリ秒を超えて 1 回おきにフェード インおよびフェード アウトします。

移動しましたのでご注意ください++

<script>
$(document).ready(function () {
    $('#signupButtonFlash').each(function (i) {
        // Get the image, set the count and an interval.
        var img = $('.bttn_play');
        img[0].$count = 0;
        img[0].$interval = setInterval(function () {
            // Animate the opacity over .2 seconds
            if (++img[0].$count % 2) {
              img.animate({opacity: .3}, 200)
            }else{
              img.animate({opacity: 1}, 200)
            }

            // Clear the interval once we've reached 1000.
            if (img[0].$count >= 1000) {
                clearInterval(img[0].$interval);
            }
        }, 1000);
    });
});
</script>
于 2011-04-12T12:54:44.463 に答える
0

コードを大幅に削減できます。

$.fn.fadeLoop = function()
{
    var that = this;
    $(this).data('fadeTimer', setTimeout(function() {
        $(that).fadeOut(400, function() {
            $(that).fadeIn(400,  $(that).fadeLoop);
        });
    }, 2000));
};

$(document).ready(function() { 
    $('img.bttn_play').hover(function() {
        clearTimeout($(this).data('fadeTimer'));
        $(this).stop(true).css('opacity', 1);
    }, $(this).fadeLoop)
    .fadeLoop();
});

ここで利用可能な作業フィドル: http://jsfiddle.net/BEMSD/89/

于 2011-04-12T12:55:19.923 に答える
-1

これはコードに正確には役立ちませんが、一時停止/再生機能を備えたスライドショー方式で一連の画像/コンテンツを循環させたいように思われるため、 jQueryCycleプラグインを調べる必要があります。

于 2011-04-12T12:39:58.950 に答える