CODEWITHSUNDEEP
javascriptjquery
Matt Rogers
Matt Rogers

Reputation: 197

SlideToggle Div Animation

i have the following jQuery code.

$(function() {
    $('.clickme').click(function() {
        $('.totalthing').slideToggle('slow','easeInOutQuart', function() {
            // Animation complete.
        });
        $('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
            // Animation complete.
        });
    });
});

At the moment it closes one of the div's and opens another at the same time. What I want it to do is close the open div then once it is fully closed it opens the other.

Upvotes: 1

Views: 225

Answers (2)

mgraph
mgraph

Reputation: 15338

try:

$(function() {
    $('.clickme').click(function() {
       var tot = $('.totalthing');
       var exp = $('.expandedcase');

       var frt = (tot.is(":visible"))?tot:exp;
       var lst = (tot.is(":visible"))?exp:tot;

       frt.stop().slideToggle('slow','easeInOutQuart', function() {
          lst.stop().slideToggle('slow','easeInOutQuart', function() {/*complete*/});
       });
    });
});

Upvotes: 1

John Koerner
John Koerner

Reputation: 38079

Your comments should point you in the right direction. If you want one animation to start once the other is complete, then move it to the function.

$(function() {
$('.clickme').click(function() {
$('.totalthing').slideToggle('slow','easeInOutQuart', function() {
    // Animation complete.
    $('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
        // Animation complete.
    });
});

});
});

Upvotes: 1

Related Questions