javascript - SlideToggle Div アニメーション

Question

次のjQueryコードがあります。

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

現時点では、div の 1 つを閉じ、同時に別の div を開きます。私がやりたいのは、開いているdivを閉じてから、完全に閉じたらもう一方を開くことです。

Answer 1

あなたのコメントはあなたを正しい方向に向けるべきです。一方のアニメーションをもう一方のアニメーションが完了したら開始する場合は、それを関数に移動します。

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

});
});

Answer 2

試す：

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