jquery - Jquery淡入淡出，暂停或延迟

Question

如果有以下代码，但在淡入和淡出之后我无法暂停：

$(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);
    });
});

Answer 1

这达到了你想要的。您也可以delay按照其他人的建议使用，但我担心在前一个动画仍在运行时触发间隔。该代码改为（例如）每 1000 毫秒触发一次间隔，并每隔一段时间淡入和淡出，超过 200 毫秒。

请注意，我已经移动了++！

<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>

Answer 2

您的代码可以显着减少：

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

Answer 3

这对您的代码没有帮助，但也许您应该查看jQuery Cycle 插件，因为听起来您想以幻灯片方式循环浏览一堆图像/内容，并能够暂停/播放。