jQuery 淡入每个元素 - 一个接一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/379900/
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
Fade in each element - one after another
提问by Coughlin
I am trying to find a way to load a JSON page to display my content, which I currently have. But I am trying to fade in each element one after another? Is anyone familiar with a way to do that?
我正在尝试找到一种方法来加载 JSON 页面以显示我目前拥有的内容。但我试图一个接一个地淡入每个元素？有没有人熟悉这样做的方法？
Fade in each element with a slight delay?
淡入每个元素略有延迟？
Here is an example of my code, I am using the jquery framework.
这是我的代码示例，我使用的是 jquery 框架。
CODE: http://pastie.org/343896
采纳答案by Genericrich
Well, you could setup your fade functions to trigger the "next" one.
好吧，您可以设置淡入淡出功能来触发“下一个”功能。
$("div#foo").fadeIn("fast",function(){
$("div#bar").fadeIn("fast", function(){
// etc.
});
});
But a timer may be a better system, or a function that gets them all, puts them in an array, then pops them off one at a time with a delay in between, fading them in one at a time.
但是计时器可能是一个更好的系统，或者是一个函数，可以将它们全部取出，将它们放入一个数组中，然后一次一个地弹出它们，中间有一个延迟，一次一个地使它们消失。
回答by Aaron
Let's say you have an array of span elements:
假设您有一个 span 元素数组：
$("span").each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
(quick note: I think you need jQuery 1.4 or higher to use the .delay method)
（快速说明：我认为您需要 jQuery 1.4 或更高版本才能使用 .delay 方法）
This would basically wait a set amount of time and fade each element in. This works because you're multiplying the time to wait by the index of the element. The delays would look something like this when iterating through the array:
这基本上会等待一定的时间并淡入每个元素。这是有效的，因为您将等待时间乘以元素的索引。迭代数组时，延迟看起来像这样：
- Delay 400 * 0 (no delay, just fadeIn, which is what we want for the very first element)
- Delay 400 * 1
- Delay 400 * 2
- Delay 400 * 3
- 延迟 400 * 0（没有延迟，只是淡入，这是我们想要的第一个元素）
- 延时400*1
- 延时400*2
- 延时400*3
This makes a nice "one after the other" fadeIn effect. It could also be used with slideDown. Hope this helps!
这会产生一个很好的“一个接一个”的淡入效果。它也可以与slideDown 一起使用。希望这可以帮助！
回答by halfpastfour.am
How about this?
这个怎么样？
jQuery.fn.fadeDelay = function() {
delay = 0;
return this.each(function() {
$(this).delay(delay).fadeIn(350);
delay += 50;
});
};
回答by Tamas Czinege
I think you will need something like this:
我想你会需要这样的东西：
var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery();
fadeInNextElement(elementArray);
function fadeInNextElement(elementArray)
{
if (elementArray.length > 0)
{
var element = elementArray.pop();
$(element).fadeIn('normal', function()
{
fadeInNextElement(elementArray);
}
}
}
Caution: I haven't tested it, but even if it does not work, you should get the idea and fix it easily.
注意：我还没有测试过，但即使它不起作用，您也应该了解并轻松修复它。
By the way, I don't agree with using a timer. With a timer, there is nothing guaranteeing that the elements fade in one after each other, and the fading in of one element will only start if the previous one is over.
顺便说一句，我不同意使用计时器。使用计时器，无法保证元素一个接一个地淡入，并且一个元素的淡入只有在前一个元素结束时才会开始。
Theoretically, it should work, but there might be cases when your "chain" needs to stop for some reason, or the fading animation cannot finish on time, etc. Just use proper chaining.
从理论上讲，它应该可以工作，但可能会出现您的“链条”由于某种原因需要停止，或者渐变动画无法按时完成等情况。只需使用适当的链接即可。
回答by Darryl Hein
Check out jQuery fadeIn()with a setTimeout() (standard JS function). You can checkout something I did on this site http://www.realstorage.ca/. I basically hide and show them so it can go in a loop.
使用 setTimeout()（标准 JS 函数）检查 jQuery淡入（）。你可以查看我在这个网站http://www.realstorage.ca/上所做的事情。我基本上隐藏并显示它们，以便它可以循环。
回答by Kyle Coots
From answers above I came up with something like this which worked well for me.
从上面的答案中，我想出了这样的东西，对我来说效果很好。
HTML
HTML
<div id="errorMessage" class="d-none" ></div>
Javascript
Javascript
var vehicle = {
error: (error, message) => {
if(error){
vehicle.popUp(message, 'bg-danger');
}else{
vehicle.popUp(message, 'bg-success');
}
},
popUp: (array, bgColor) => {
var errorBox = $('#errorMessage');
errorBox.removeClass('d-none');
$.each(array, function(i,e){
i=i+1;
var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>';
$(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){
$('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){
$('#'+i).remove();
});
});
});
},
}
