如何重复（循环）Jquery 淡入淡出 - 淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9319573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to repeat (loop) Jquery fadein - fadeout - fadein
提问by c2oxide
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:
我正在为我的第一个 jQuery 脚本而苦苦挣扎。我的页面上有一个设置为通过 CSS 隐藏的 DIV。然后，我运行此脚本以使其淡入、淡出，然后再次淡入：
<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
提前致谢！-内特
回答by Jasper
Put your code inside a setInterval:
将您的代码放在 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
文档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:
此外，.delay()您可以使用每个动画中的回调函数来调用一个又一个动画，而不是使用：
$(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/
这是一个演示：http: //jsfiddle.net/xsATz/
You can also use setTimeoutand call a function recursively:
您还可以setTimeout递归地使用和调用函数：
$(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/
这是一个演示：http: //jsfiddle.net/xsATz/1/
回答by littlealien
<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>
just for imagination. You can do it with css3. I hope that can help you too. Doing this kind of things, css should be more confortable for browser performance instead of jQuery.
只是为了想象。你可以用 css3 来做到这一点。我希望这也能帮助你。做这种事情，css 应该比 jQuery 更适合浏览器性能。
回答by gabrielperezs
I have some problmes with setTimeout method. Maybe is better with "trigger":
我对 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');
