将jQuery delay()与单独的元素一起使用 [英] Using jQuery delay() with separate elements

问题描述

我想通过顺序显示几个png来伪造页面加载时的简单动画，每个png即时出现，但在下一个出现之前具有独特的，精确的延时.使用最新版本的jQuery(写作时为1.4.2)，它提供了一种延迟方法.我的第一个(braindead)冲动是:

I want to fake a simple animation on page load by sequentially revealing several pngs, each appearing instantly but with unique, precisely timed delay before the next one. Using the latest version of jQuery (1.4.2 at writing), which provides a delay method. My first (braindead) impulse was:

$('#image1').show('fast').delay(800);
$('#image2').show('fast').delay(1200);
$('#image3').show('fast');

当然都是同时出现的. jQuery doc示例引用的是链接的单个项目，而不是处理多个项目. OK ...使用show()中的嵌套回调再次尝试:

Of course all come up simultaneously. jQuery doc examples refer to a single item being chained, not handling multiple items. OK... try again using nested callbacks from show():

$('#image1').show('fast', function() {
    $('#image2').show('fast', function() {      
        $('#image3').show('fast', function() {      
        });
    });
});

看起来很丑陋(想象做10个，也想知道处理器的命中率是多少)，但是，它可以按顺序工作！刻不容缓.所以... show()之后的chain delay()使用来自其的回调函数(甚至不确定它是否支持一个):

Looks ugly (imagine doing 10, also wonder what processor hit would be) but hey, it works sequentially! Without delay though. So... chain delay() after show() using a callback function from it (not even sure if it supports one):

$('#image1').show('fast').delay(800, function() {
    $('#image2').show('fast').delay(1200, function() {      
        $('#image3').show('fast');
    });
});

嗯.我认为可能会发生的相反结果:回调有效，但仍然没有延迟.所以...我应该使用队列和延迟的某种组合，而不是嵌套的回调吗?再次用于队列的jQuery doc示例仅使用一个元素作为示例.猜测将涉及使用自定义队列，但不确定如何实现.还是我想念一个简单的方法? (对于一个简单的问题！)

Hm. Opposite result of what I thought might happen: the callback works, but still no delay. So... should I be using some combination of queue and delay instead of nested callbacks? jQuery doc examples for queue again only use one element for example. Guessing this would involve using a custom queue, but am uncertain how to implement this. Or maybe I'm missing a simple way? (For a simple problem!)

推荐答案

这里很容易猜到，但是

$('#image1').show('fast', function() {
    $('#image2').delay(800).show('fast', function() {      
        $('#image3').delay(1200).show('fast', function() {      
        });
    });
});

这篇关于将jQuery delay()与单独的元素一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！