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 plugin，因为听起来你想要以幻灯片方式循环浏览一堆图像/内容，并且能够暂停/播放。

Jquery淡出淡出，暂停或延迟

3 个答案: