如何为 slideToggle 添加延迟

Question

I am trying to delay each image by one second after the other. But the delay doesn't seem to work.

$( document ).ready(function() {
    $("#logo1").slideToggle(1000,"easeOutBounce");
    $("#logo2").delay(1000).slideToggle(1000,"easeOutBounce");
    $("#logo3").delay(2000).slideToggle(1000,"easeOutBounce");
    $("#logo4").delay(3000).slideToggle(1000,"easeOutBounce");
    $("#logo5").delay(4000).slideToggle(1000,"easeOutBounce");
    $("#logo6").delay(5000).slideToggle(1000,"easeOutBounce");
    $("#logo7").delay(6000).slideToggle(1000,"easeOutBounce");
    $("#logo8").delay(7000).slideToggle(1000,"easeOutBounce");
    $("#logo9").delay(8000).slideToggle(1000,"easeOutBounce");
    $("#logo10").delay(9000).slideToggle(1000,"easeOutBounce");
    $("#logo11").delay(10000).slideToggle(1000,"easeOutBounce");
    $("#logo12").delay(11000).slideToggle(1000,"easeOutBounce");
    $("#logo13").delay(12000).slideToggle(1000,"easeOutBounce");
});

And the HTML

<img src="images/logo/L.png" id="logo1" />
<img src="images/logo/Y.png" id="logo2" />
<img src="images/logo/O.png" id="logo3" />
<img src="images/logo/N.png" id="logo4" />
<img src="images/logo/S.png" id="logo5" />

<img src="images/logo/&.png" id="logo6" />

<img src="images/logo/S.png" id="logo7" />
<img src="images/logo/H.png" id="logo8" />
<img src="images/logo/A.png" id="logo9" />
<img src="images/logo/N.png" id="logo10" />
<img src="images/logo/N.png" id="logo11" />
<img src="images/logo/A.png" id="logo12" />
<img src="images/logo/N.png" id="logo13" />

The CSS positions the images one after the other.

Please could somebody take a look.

Thanks.

Answer 1

From doc:

The .delay() method is best for delaying between queued jQuery effects.

eg

$('#test').show().delay(1000).hide();

In your case, I suggest

1. Chain it

$("#logo1").slideToggle(1000,"easeOutBounce", function()
{
    $("#logo2").slideToggle(1000,"easeOutBounce", function()
    {
        // do something after logo2 finished sliding.
        // keep doing this until logo13..
    });
});

2. Use deferred object

$(function(){
    function slide(elem)
    {
        var deferred = $.Deferred();

        $(elem).slideToggle(1000,"easeOutBounce", function()
        {
            deferred.resolve();
        });

        return deferred.promise();
    }

    var logos = ['#logo1', '#logo2', '#logo3'];
    var i = 0;

    function runSlider()
    {
        slide(logos[i]).done(function(){
            i++;
            if (logos[i] != null) runSlider();
        });
    }
});

I prefer the 2nd one though. And btw, I haven't tested this code yet. Good luck.

Answer 2

I seemed to have solved it. I'm not sure if this is the best way but it works. (I altered the times too)

$( document ).ready(function() {
    $("#logo1").slideDown(1000);
function logo2(){
    $("#logo2").slideDown(1000);
}setTimeout(logo2, 300);
function logo3(){
    $("#logo3").slideDown(1000);
}setTimeout(logo3, 600);
function logo4(){
    $("#logo4").slideDown(1000);
}setTimeout(logo4, 900);
function logo5(){
    $("#logo5").slideDown(1000);
}setTimeout(logo5, 1200);
function logo6(){
    $("#logo6").slideDown(1000);
}setTimeout(logo6, 1500);
function logo7(){
    $("#logo7").slideDown(1000);
}setTimeout(logo7, 1800);
function logo8(){
    $("#logo8").slideDown(1000);
}setTimeout(logo8, 2100);
function logo9(){
    $("#logo9").slideDown(1000);
}setTimeout(logo9, 2400);
function logo10(){
    $("#logo10").slideDown(1000);
}setTimeout(logo10, 2700);
function logo11(){
    $("#logo11").slideDown(1000);
}setTimeout(logo11, 3000);
function logo12(){
    $("#logo12").slideDown(1000);
}setTimeout(logo12, 3300);
function logo13(){
    $("#logo13").slideDown(1000);
}setTimeout(logo13, 3600);
});

Thanks for your help