Question

我试图将每张图片延迟一秒钟。但延迟似乎不起作用。

Hello, my figure \ref{figure1} has an ecuation $e=mc^2$ with a mass of \SI{10.5}{Kg} or \SI{20.5}{Kg}.

和HTML

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

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

请有人看看。

感谢。

Answer 1

来自doc：

.delay（）方法最适合在排队的jQuery之间延迟的效果。

e.g。

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

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

Answer 2

我好像已经解决了。我不确定这是不是最好的方式，但它有效。（我也改变了时间）

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

感谢您的帮助

如何为slideToggle添加延迟

2 个答案: