javascript - 如何给slideToggle添加延迟

Question

我试图将每个图像延迟一秒。但延迟似乎不起作用。

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

和 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" />

CSS 将图像一个接一个地定位。

请有人看一下。

谢谢。

Answer 1

来自文档:

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

例如

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

就你的情况，我建议

<强>1。链接起来

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

<强>2。使用延迟对象

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

不过我更喜欢第二个。顺便说一句，我还没有测试过这段代码。 祝你好运。