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

Question

我正在努力编写我的第一个 jQuery 脚本。我的页面上有一个 DIV，该 DIV 设置为通过 CSS 隐藏。然后，我运行这个脚本以使其淡入、淡出，然后再次淡入:

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

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

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

提前致谢!-内特

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/