toggleClassの遅延？

Question

ボタンをクリックしたときにヘッダー/バナーセクションを開閉するこの簡単なスクリプトを作成しました。変更の1つはボタンapperance/classです。あなたはそれがクラスを切り替えボタンをクリックすると、だから、今

$('.closeBtn').toggleClass("closeBtn1 openBtn1"); //you can list several class names 
e.preventDefault(); 

：私は、スクリプトのこの部分に遅延を追加したいしかし

$('.closeBtn').on('click', function(e) { 
     $('.site-header').toggleClass("openHeader closeHeader"); //you can list several class names 
     e.preventDefault(); 

     $('.closeBtn').toggleClass("closeBtn1 openBtn1"); //you can list several class names 
     e.preventDefault(); 

     $('.closeDivider').toggleClass("closeDivider1 closeDivider2"); //you can list several class names 
     e.preventDefault(); 
     $('.CloseBtnWrap').toggleClass("CloseBtnWrap1 CloseBtnWrap2"); //you can list several class names 
     e.preventDefault(); 
    }); 

：ここ

は、全体のスクリプトです。しかし、実際にスイッチを切り替える前に、半分の遅延を追加したいと思います。

このコードは見つかりましたが、現在のコードに適用すると失敗しました。 toggleClass with delay

キンダーの初心者。 ありがとう！

---

ここに私のCSSが必要です。

.CloseBtnWrap{ 
    width:100%; 
    height:61px; 
    position:absolute; 
    margin-top: -61px; 
    z-index:5; 
    } 
    .CloseBtnWrap1{ 
    margin-top: -61px; 
    } 
    .CloseBtnWrap2{ 
    margin-top: -2px; 
    } 
    .closeBtn{ 
    width:203px; 
    height:44px; 
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/close-top-btn.png?17190220414767002292"); 
    background-repeat: no-repeat; 
    position:absolute; 
    margin-top:16px; 
    margin-left:-102px; 
    left:50%; 
    cursor: pointer; 
    z-index:1; 
    } 

    .closeBtn1{ 
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/close-top-btn.png?17190220414767002292"); 
    margin-top:16px; 
    } 

    .openBtn1{ 
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/open-top-btn.png?12561607923280938330"); 
    margin-top: 0px; 
    } 

    .closeDivider{ 
    width:100%; 
    height:13px; 
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/top-divider.png"); 
    background-repeat: repeat-x; 
    position:absolute; 
    margin-top:48px; 
    } 
    .closeDivider1{ 
    margin-top:48px; 
    } 
    .closeDivider2{ 
    margin-top:0px; 
    } 

    .openHeader{ 
    margin-top: -25px; 
    transition: all .8s; 
    -o-transition: all .8s; 
    -moz-transition: all .8s; 
    -webkit-transition: all .8s; 
    } 
    .closeHeader{ 
    margin-top: -648px; 
    transition: all .8s; 
    -o-transition: all .8s; 
    -moz-transition: all .8s; 
    -webkit-transition: all .8s; 
    } 

Answer 1

この

setTimeout(function(){ 
    $('.closeBtn').toggleClass("closeBtn1 openBtn1"); 

    },500) 

あなたはtoggleClassコールバックでオープン/クローズボタンクラスを変更することができます

を更新してみますが、非常に多くの `e.preventDefaultを持っているのはなぜ

$('.site-header').toggleClass('openHeader closeHeader', 
    500).promise().done(function(){ 

     $('.closeBtn').toggleClass("closeBtn1 openBtn1"); 
    });