Verzögerung für toggleClass?

Question

Ich habe dieses einfache Skript ausgearbeitet, das den Header/Banner-Abschnitt öffnet und schließt, wenn auf die Schaltfläche geklickt wird. Eine der Änderungen ist die Schaltfläche apperance/class. Hier

ist das ganze Skript:

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

Jedoch habe ich eine Verzögerung auf diesen Teil des Skripts hinzufügen möchten:

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

So, jetzt rechts, wenn Sie auf die Schaltfläche klicken Sie die Klasse wechselt . Allerdings würde ich gerne eine halbe Sekunde Verzögerung hinzufügen, bevor der Schalter tatsächlich passiert.

Ich fand diesen Code aber fehlgeschlagen, wenn ich es auf meinen aktuellen Code anwende. toggleClass with delay

Wie ein Neuling. Danke!

---

Hier ist mein CSS, wenn Sie es brauchen.

.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

Versuchen Sie, diese

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

    },500) 

AKTUALISIERT

Sie können auf toggleClass Rückruf

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

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