JavaScript animation 延迟

Question

I have animation by JavaScript and I want to add some sort of delay after it and before it execute second part of the code. similar to Ajax success / done functionality

Code

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

Note Second part of the code waits till animation finish and execute after let say 300ms. So it gives users time to enjoy the animation instead of immediately jump to next section.

Any idea?

Answer 1

Put your 2nd part into a separate function and then use settimeout (you may adjust the time by yourself)

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

    }