如何重复(循环)jQuery Fadein-Fadeout-Fadein [英] How to repeat (loop) Jquery fadein - fadeout - fadein

问题描述

我正在为我的第一个jQuery脚本而苦苦挣扎.我的页面上有一个DIV，该DIV设置为通过CSS隐藏.然后，我运行此脚本以使其淡入，淡出然后再次淡入:

<script type="text/javascript">
  (function($) {
    $(function() {
      $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }); 
  })(jQuery);
</script>

这部分工作正常.现在，我的问题:

如何更改它，以便此脚本(永远)而不是一次运行循环?

提前谢谢！ -内特

解决方案

将代码放入setInterval:

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

由于只要页面处于活动状态，您就将一直运行它，因此您应该尽一切努力优化代码，例如，可以将选择内容缓存在间隔之外:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

setInterval的文档: https://developer.mozilla.org/en/window. setInterval

此外，除了使用.delay()之外，您还可以在每个动画中使用回调函数来依次调用一个动画:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500)
            });
        });
    }, 5000);
});

这是一个演示: http://jsfiddle.net/xsATz/

您还可以使用setTimeout并递归调用函数:

$(function () {
    var $element = $('#abovelogo');
    function fadeInOut () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

这是一个演示: http://jsfiddle.net/xsATz/1/

I am struggling with my first jQuery script. I've got a DIV on my page that is set to hide via CSS. Then, I have this script that runs to make it fade in, fade out, then fade in again:

<script type="text/javascript">
  (function($) {
    $(function() {
      $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }); 
  })(jQuery);
</script>

This part works fine. Now, my question:

How do I change it so that this script runs loops (forever) instead of just once?

Thanks in advance! -Nate

解决方案

Put your code inside a setInterval:

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Since you will be running this as long as the page is active then you should do everything you can to optimize your code, for instance you can cache the selection outside of the interval:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Docs for setInterval: https://developer.mozilla.org/en/window.setInterval

Also, instead of using .delay() you can use the callback functions in each animation to call one animation after another:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500)
            });
        });
    }, 5000);
});

Here is a demo: http://jsfiddle.net/xsATz/

You can also use setTimeout and call a function recursively:

$(function () {
    var $element = $('#abovelogo');
    function fadeInOut () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Here is a demo: http://jsfiddle.net/xsATz/1/

这篇关于如何重复(循环)jQuery Fadein-Fadeout-Fadein的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！