如何重复（循环）Jquery淡入-淡出-淡入答案

【问题标题】：How to repeat (loop) Jquery fadein - fadeout - fadein如何重复（循环）Jquery淡入-淡出-淡入
【发布时间】：2012-02-16 21:46:34
【问题描述】：

我正在为我的第一个 jQuery 脚本而苦苦挣扎。我的页面上有一个 DIV，它设置为通过 CSS 隐藏。然后，我运行这个脚本使其淡入、淡出，然后再次淡入：

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

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

如何更改它以使此脚本循环运行（永远）而不是只运行一次？

提前致谢！ -内特

【问题讨论】：

标签： jquery delay fadein fadeout

【解决方案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/

【讨论】：

【解决方案2】：

<script type="text/javascript">
function doFade() {
    $('.foo').toggleClass('fooAct');
    setTimeout(doFade, 1000);
}
$(document).ready(function(){
    doFade();
});
</script>
<style>
div {
height:200px;
background:black;   
}
.foo {
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
opacity:0.1;
}
.fooAct {
opacity:1;
}
</style>
<div class="foo"></div>

只是为了想象。你可以用css3做到这一点。我希望这也能帮助你。做这种事情，css应该比jQuery更适合浏览器性能。

【讨论】：

【解决方案3】：

我对 setTimeout 方法有一些问题。使用“触发器”可能会更好：

var $element = $('.banner');
$element.bind('cusfadeOut',function() {
        $(this).fadeOut(500,function() {
                $(this).trigger('cusfadeIn');
        });
});
$element.bind('cusfadeIn',function() {
        $(this).fadeIn(1000, function() {
                $(this).trigger('cusfadeOut');
        });
});
$element.trigger('cusfadeOut');

【讨论】：

我不确定这是否有资格作为答案。你能澄清一下吗？
使用“Timeout”时，可能是“fadeIn”事件在“fadeOut”结束之前释放（取决于时间的契合程度）。使用触发器，这永远不会发生。仅在fadeIn fadeOut 完成时启动，您可以定义任何时间而无需调整“超时”。