51

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

稍微延迟淡入每个元素？

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

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

4

6 回答 6

270

假设您有一个跨度元素数组：

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

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

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

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

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

于 2011-01-11T19:43:25.427 回答
18

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

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

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

于 2008-12-19T01:55:16.363 回答
10

这个怎么样？

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};
于 2011-02-15T11:57:59.033 回答
4

我认为您将需要这样的东西：

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


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

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

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

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

于 2008-12-19T02:05:35.703 回答
1

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

于 2008-12-19T01:53:00.753 回答
0

从上面的答案中，我想出了这样的东西，对我来说效果很好。

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

}
于 2019-09-01T01:02:27.063 回答