CODEWITHSUNDEEP
jquery
Daniel Morgan
Daniel Morgan

Reputation: 561

Disallow one animation to begin until the other one ends

What I'm basically trying to do is get the background of my whole website to go black, scroll down to a specific point and then go back to normal which works FINE but it executes all three animations at the same time, I was wondering if there was a way to prevent this? My jQuery is this 

$('.gotohtml5andcss3').click(function () {

    $('#bg_black').fadeIn('fast');

    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000);

    $('#bg_black').fadeOut('fast');
});

I'm not asking for the code, just a nudge in the right direction. Thanks in advance!

Upvotes: 0

Views: 39

Answers (2)

David
David

Reputation: 218808

You can chain the animations into each other's callback functions. Something like this:

$('#bg_black').fadeIn('fast', function () {
    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000, function () {
        $('#bg_black').fadeOut('fast');
    });
});

Since each one happens asynchronously, you'd want to use its call-back function parameter to execute the next step in a serial sequence of steps.

Upvotes: 2

Satpal
Satpal

Reputation: 133403

You can use callback function like

$('#bg_black').fadeIn('fast', function(){
    $('html, body').animate({
        scrollTop: $(".html5andcss3").offset().top
    }, 1000);
});

Complete Code:

$('.gotohtml5andcss3').click(function () {
    $('#bg_black').fadeIn('fast', function(){
        $('html, body').animate({
            scrollTop: $(".html5andcss3").offset().top
        }, 1000, function(){
            $('#bg_black').fadeOut('fast');
        });
    });
});

Upvotes: 2

Related Questions