如何重复(循环)Jquery fadein - fadeout - fadein

Question

我正在努力学习我的第一个jQuery脚本.我的页面上有一个DIV,可以通过CSS隐藏.然后,我有这个脚本运行,使其淡入,淡出,然后再次淡入:

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

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

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

提前致谢!-Nate

Answer 1

将您的代码放在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/