JQuery 淡入淡出循环和延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1301529/
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
JQuery fade with loop and delay
提问by Martin
I have 2 Divs stacked on top of each other.
我有 2 个 Div 堆叠在一起。
I need a really simple function that will:
我需要一个非常简单的函数，它将：
a) Wait for 3 seconds and then b) FadeOut the top Div to reveal the second Div c) Wait 3 seconds again and then d) FadeIn the top Div again e) Loop back again
a) 等待 3 秒钟，然后 b) 淡出顶部 Div 以显示第二个 Div c) 再次等待 3 秒钟，然后 d) 再次淡入顶部 Div e) 再次循环返回
Can anyone offer any advice?
任何人都可以提供任何建议吗？
Many thanks
非常感谢
回答by Chetan Sastry
Here's an attempt.
这是一个尝试。
function foo() {
jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 1.0}, {duration: 3000, complete: foo})
}
Note: To pause, just call animate over a property with the same target value as it is right now. The last animate calls the the same function as callback.
注意：要暂停，只需在目标值与现在相同的属性上调用 animate 即可。最后一个动画调用与回调相同的函数。
PS: Does it cause stack overflow over time?
PS：随着时间的推移会导致堆栈溢出吗？
回答by aviraldg
if the two divs have ids of "id1" and "id2", and id2 is the upper one then the code would be like:
如果两个 div 的 id 为“id1”和“id2”，并且 id2 是上面的那个，那么代码将如下所示：
function fadeIn() {
$("id2").animate({opacity:0},500);
setTimeout(fadeOut,3500);
}
function fadeOut() {
$("id2").animate({opacity:1},500);
setTimeout(fadeIn,3500);
}
function startAnim() {
setTimeout(fadeIn,3000);
}
startAnim() starts the animation cycle , which you should call @ the start. Then fadeIn & Out keep animating id2 and setting timeouts for each other. The delay is 3500 , as you wanted 3 seconds of delay (ie. 3000ms) and 500 for the previous animation to complete. This could have been done using a callback on animate , but that's more messy.
startAnim() 启动动画循环，您应该将其称为 @ 开始。然后fadeIn & Out 继续为id2 设置动画并为彼此设置超时。延迟是 3500 ，因为您需要 3 秒的延迟（即 3000 毫秒）和 500 来完成上一个动画。这可以通过对 animate 使用回调来完成，但这更麻烦。
回答by Floyd
Here's what you're looking for (I think). It uses an unordered-list, but you could switch it out for div's or just put your div's inside of the list items like I've done below.
这就是你要找的（我认为）。它使用无序列表，但您可以将其切换为 div 或只是将您的 div 放在列表项中，就像我在下面所做的那样。
Here's the jQuery...
这是jQuery...
$(document).ready(function() {
var j = 0;
var delay = 2000; //millisecond delay between cycles
function cycleThru(){
var jmax = $("ul#cyclelist li").length -1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
...and some starting css...
...和一些开始的CSS ...
ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}
You already have your HTML, but in case you need an example...
你已经有了你的 HTML，但如果你需要一个例子......
<ul id="cyclelist">
<li><div>First Div</div></li>
<li><div>Second Div</div></li>
<li><div>Third Div</div></li>
</ul>
I'd love to take credit for this, but it's straight from CSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/
我很乐意为此归功于它，但它直接来自 CSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/
回答by Nata2ha Mayan2
no one may ever see this, but just in case...
没有人可能会看到这一点，但以防万一……
<script>
$(document).ready(function() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>
this is without looping it though....
这虽然没有循环......
That would be
那将是
<script>
$(document).ready(function() {
function animate(){
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}
animate();
setInterval(animate, 10000);
});
</script>
回答by Damien Keitel
IF you also want to have it xfade. Use floyed's script but make the changes that I have used. Only problem is your first image you want shown should be the second one in the li elements
如果你也想拥有它xfade。使用 floyed 的脚本，但进行我使用过的更改。唯一的问题是您想要显示的第一张图片应该是 li 元素中的第二张图片
$(document).ready(function() {
var j = 0;
var delay = 5000; //millisecond delay between cycles
function cycleThru(){
var jmax = $("ul#cyclelist li").length -1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "1"} ,1000)
.animate({"opacity" : "1"}, delay);
$("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "0"}, 1000, function(){
(j == jmax) ? j=0 : j--;
cycleThru();
});
};
cycleThru();
});
回答by ehftwelve
I know this is old, but I thought I would share what I did to accomplish this
我知道这很旧，但我想我会分享我为实现这一目标所做的工作
$(document).ready(function() {
var delay = 500;
$("#mydiv").bind('fadein', function()
{
$(this).fadeOut(1000, function()
{
$(this).delay(delay).trigger('fadeout');
});
});
$("#mydiv").bind('fadeout', function()
{
$(this).fadeIn(1000, function()
{
$(this).delay(delay).trigger('fadein');
});
});
$("#mydiv").fadeIn(1000, function()
{
$(this).trigger("fadein");
});
});
then call this when you want it to stop
然后在您希望它停止时调用它
$("#mydiv").stop().hide();
回答by ehftwelve
This attempt uses a small cookbook function wait from jquery.com.
此尝试使用 jquery.com 中的一个小型食谱函数等待。
The function doFading assumes the id of the top div to be "a4".
函数 doFading 假定顶部 div 的 id 为“a4”。
function doFading() {
$("#a4").wait(3000)
.fadeOut("slow")
.wait(3000)
.fadeIn("slow",doFading);
}
$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};
