Question

我正在尝试找到一种方法来加载JSON页面来显示我目前拥有的内容。但我试图逐个淡出每个元素？是否有人熟悉这种方法？

稍微延迟淡化每个元素？

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

Answer 1

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

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

（快速说明：我认为你需要jQuery 1.4或更高版本来使用.delay方法）

这基本上会等待一段时间并淡化每个元素。这是有效的，因为你将等待时间乘以元素的索引。在迭代数组时，延迟看起来像这样：

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

这使得“一个接一个”fadeIn效果很好。它也可以与slideDown一起使用。希望这有帮助！

Answer 2

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

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

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

Answer 3

这个怎么样？

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

Answer 4

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

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


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

警告：我没有对它进行测试，但即使它不起作用，你也应该明白并轻松修复它。

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

理论上，它应该可以工作，但是有些情况下你的“链”需要因某种原因停止，或者褪色动画无法按时完成等等。只需使用正确的链接。

Answer 5

使用setTimeout（）（标准JS函数）查看jQuery fadeIn()。您可以查看我在此网站http://www.realstorage.ca/上执行的操作。我基本上隐藏并显示它们，所以它可以循环。

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

}

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

6 个答案: