Jquery 淡入淡出，带有暂停或延迟

发布于 2024-10-31 22:28:05 字数 821 浏览 1 评论 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);
    });
});

原文

If have the following code but i cant get a pause AFTER ever fade in and fade out:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最舍不得你 2024-11-07 22:28:05

这样就达到了你想要的效果。您也可以按照其他人的建议使用延迟，但我担心上一个动画仍在运行时的间隔触发。相反，此代码每隔 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>

This achieves what you want. You could also use delay as suggested by others, but I'd be worried about the interval triggering while the previous animation is still running. This code instead trigger the interval at (e.g.) every 1000 ms and fades in and out every other time, oves 200 ms.

Please note that I've moved the ++!

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

回复收藏 0 原文

红玫瑰 2024-11-07 22:28:05

您的代码可以显着减少：

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

在这里工作fiddle可用：http://jsfiddle.net /BEMSD/89/

Your code can be reduced significantly:

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

Working fiddle available here: http://jsfiddle.net/BEMSD/89/

回复收藏 0 原文