在单独启动的动画之间添加延迟

发布于 2024-11-05 05:53:43 字数 637 浏览 1 评论 0原文

我有一个包含图像 URL 的数组，我将其作为 img 标签添加到页面中。我将它们隐藏起来，并在加载时淡入它们。这是可行的，但我想在它们之间添加一点延迟，这样就不会同时淡入太多。

function ajaxCallback(data)
{
    if(data && data.images)
        for(var n in data.images)
        {
            var image = $('<img>')
                .prop(data.images[n])
                .css({opacity: 0})
                .appendTo('#output')
                .load(imageLoaded);
        }
}

function imageLoaded()
{
    $(this)
        .animate({opacity: 1});
}

目前，如果它们加载得足够快，它们基本上都会立即淡入。我想要每个之间有一点延迟。尝试添加对延迟的调用，但这似乎没有多大作用。我想我可能必须用队列或其他东西做一些事情，但不太明白如何做到这一点。

最好的方法是什么？

原文

I have an array with image URLs I add to a page as img tags. I add them hidden and fade them in when they are loaded. This works, but I'd like to add a bit of delay between each of them so it's not so much fading in at the same time.

function ajaxCallback(data)
{
    if(data && data.images)
        for(var n in data.images)
        {
            var image = $('<img>')
                .prop(data.images[n])
                .css({opacity: 0})
                .appendTo('#output')
                .load(imageLoaded);
        }
}

function imageLoaded()
{
    $(this)
        .animate({opacity: 1});
}

At the moment, if they load quick enough, they will all basically fade in at once. I'd like a bit of delay between each. Tried adding a call to delay, but that didn't seem to do much. Thinking I might have to do something with a queue or something, but can't quite get how to do this.

What's the best way to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┊风居住的梦幻卍 2024-11-12 05:53:43

在类似的情况下（与图像无关），我使用递归函数提取数组的第一个元素，执行其工作，并在完成时调用自身。在您的情况下，您应该在 animate() 的回调中再次调用该函数。

回复收藏 0 原文

萧瑟寒风 2024-11-12 05:53:43

您可以在 imageLoaded() 方法中使用 setTimeout 并为计时器提供一个随机值（在一定范围内）。

function imageLoaded()
{
   var self = $(this);
   setTimeout(function(){
                            self.animate({opacity: 1});
                        }, 
              Math.random()*2000 //will fire sometime between 0 to 2000 milliseconds
             ); 
}

You could use setTimeout in the imageLoaded() method and give a random value (within some bounds) for the timer.

function imageLoaded()
{
   var self = $(this);
   setTimeout(function(){
                            self.animate({opacity: 1});
                        }, 
              Math.random()*2000 //will fire sometime between 0 to 2000 milliseconds
             ); 
}

回复收藏 0 原文

晨敛清荷 2024-11-12 05:53:43

这是一种方法：

for (var n in data.images) {
    $('<img>').prop('src', data.images[n]).css({ // don't forget "src"
        opacity: 0
    })
      .appendTo('#output')
      .bind('reveal', imageLoaded); // bind a custom event
}

function imageLoaded() {
    $(this).animate({
        opacity: 1
    }, function(){ // wait until animation is done via callback
        $(this).next().trigger('reveal'); // then trigger the next reveal
    });
}

$('#output').find('img:first').load(function() { // when first image is loaded
    $(this).trigger('reveal'); // trigger its event to start the cascade
});

示例： http://jsfiddle.net/redler/mBfpG/

Here's one way:

for (var n in data.images) {
    $('<img>').prop('src', data.images[n]).css({ // don't forget "src"
        opacity: 0
    })
      .appendTo('#output')
      .bind('reveal', imageLoaded); // bind a custom event
}

function imageLoaded() {
    $(this).animate({
        opacity: 1
    }, function(){ // wait until animation is done via callback
        $(this).next().trigger('reveal'); // then trigger the next reveal
    });
}

$('#output').find('img:first').load(function() { // when first image is loaded
    $(this).trigger('reveal'); // trigger its event to start the cascade
});

Example: http://jsfiddle.net/redler/mBfpG/

回复收藏 0 原文

~没有更多了~