淡入每个元素 - 一个接一个答案

【问题标题】：Fade in each element - one after another淡入每个元素 - 一个接一个
【发布时间】：2010-09-27 15:38:18
【问题描述】：

我正在尝试找到一种方法来加载 JSON 页面以显示我目前拥有的内容。但我试图一个接一个地淡入每个元素？有没有人熟悉这样做的方法？

淡入每个元素会有一点延迟？

这是我的代码示例，我使用的是 jquery 框架。

代码：http://pastie.org/343896

【问题讨论】：

标签： jquery ajax load

【解决方案1】：

假设你有一个 span 元素数组：

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

（快速提示：我认为您需要 jQuery 1.4 或更高版本才能使用 .delay 方法）

这基本上会等待一段时间并淡入每个元素。这是因为您将等待时间乘以元素的索引。遍历数组时，延迟看起来像这样：

延迟 400 * 0（没有延迟，只是淡入，这是我们想要的第一个元素）
延迟 400 * 1
延迟 400 * 2
延迟 400 * 3

这会产生一个很好的“一个接一个”的淡入淡出效果。它也可以与 slideDown 一起使用。希望这会有所帮助！

【讨论】：

绝对优于嵌套回调
谢谢！即使在一年半之后，它也很有帮助。
好方法...简单、直观且易于定制。
我之前必须写“on load”之类的东西吗？不知何故... 对我不起作用…… :-(
惊人的解决方案！

【解决方案2】：

好吧，你可以设置你的淡入淡出功能来触发“下一个”。

 $("div#foo").fadeIn("fast",function(){
      $("div#bar").fadeIn("fast", function(){
           // etc.
      });
   });

但是计时器可能是一个更好的系统，或者是一个将它们全部获取的函数，将它们放入一个数组中，然后一次弹出一个，中间有延迟，一次淡入一个。

【讨论】：

【解决方案3】：

这个怎么样？

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};

【讨论】：

淡入第一个项目，然后在 50 毫秒后再次淡入？
$("ul li").fadeDelay(); - 像这样？
这就像一个魅力，只需要在结束分号之前添加“（）”来自动执行它。谢谢

【解决方案4】：

我认为你需要这样的东西：

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery();
fadeInNextElement(elementArray);


function fadeInNextElement(elementArray)
{
    if (elementArray.length > 0)
    {
        var element = elementArray.pop();
        $(element).fadeIn('normal', function()
        {
             fadeInNextElement(elementArray);
        }
    }
}

注意：我没有测试过，但即使它不起作用，你也应该得到这个想法并轻松修复它。

顺便说一句，我不同意使用计时器。使用计时器，无法保证元素一个接一个地淡入，并且只有在前一个元素结束时才会开始淡入。

理论上，它应该可以工作，但在某些情况下，您的“链”可能由于某种原因需要停止，或者淡入淡出的动画无法按时完成等。只需使用适当的链接即可。

【讨论】：

是否可以让fadeInNextElement 不影响数组？从当前列表中我最喜欢你的回答，但是fadeInNextElement 的副作用感觉有点不对。

【解决方案5】：

使用 setTimeout()（标准 JS 函数）查看 jQuery fadeIn()。你可以查看我在这个网站上所做的事情http://www.realstorage.ca/。我基本上隐藏并显示它们，以便它可以循环。

【讨论】：

【解决方案6】：

根据上面的答案，我想出了类似的方法，对我来说效果很好。

HTML

<div id="errorMessage" class="d-none" ></div>

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();    
            });
        });
    });               
},

}

【讨论】：