JavaScript 动画延迟

Question

我有 JavaScript 动画，我想在它之后和执行代码的第二部分之前添加某种延迟。类似于 Ajax success/done 功能

代码

$('#startButton').on('click', function() {

    // run animation on click

    document.getElementById("rightHand").animate([

        { transform: 'translateY(80px)' }, 

        { transform: 'translateY(0px)' }

    ], {

        duration: 100

    });

    //run second part

    $('#portfolio').show();

    $('.footer').show();

    var hash = $('#portfolioSection');

    $('html, body').animate({

        scrollTop: $(hash).offset().top

    }, 800);

});

注意代码的第二部分等待动画完成并在 300 毫秒后执行。因此，它让用户有时间欣赏动画，而不是立即跳到下一部分。

任何想法？

Answer 1

将你的第二部分放入一个单独的函数中，然后使用settimeout（你可以自己调整时间）$('#startButton').on('click', function() {    // run animation on click    document.getElementById("rightHand").animate([        { transform: 'translateY(80px)' },         { transform: 'translateY(0px)' }    ], {        duration: 100    });    // say after 3 seconds to trigger secondpart    setTimeout(function(){ secondpart(); }, 3000);        });function secondpart(){           //run second part    $('#portfolio').show();    $('.footer').show();    var hash = $('#portfolioSection');    $('html, body').animate({        scrollTop: $(hash).offset().top    }, 800);    }