ToggleClass使用jQuery進行動畫製作嗎？

我有一節在我的網站，當用戶點擊我想它的擴大，我使用jQuery的toggleClass此ToggleClass使用jQuery進行動畫製作嗎？

jQuery('.menux').click(function() { 
     jQuery(this).toggleClass('is-active'); 
     jQuery('.a').toggleClass('a1'); 
     jQuery('.b').toggleClass('b1'); 
     jQuery('.c').toggleClass('c1'); 
    });

點擊時，動畫完美地運行。但是當我第二次點擊時，動畫不會出現。第一次點擊時不同，動畫緩慢運行。當我使用jQuery('.c').toggleClass('c1', 2000); < - 持續時間，不工作！如何在第二次點擊中使用動畫？爲了提升緩慢向上

這是我的測試https://jsfiddle.net/u6aztsgt/1/

來源

2016-12-27 test

你有什麼期待，當你點擊了第二次！ – PacMan

您在此JSFiddle中完全沒有使用jQuery - 您正在使用純香草JavaScript來添加和刪除類。然後你的CSS有一個關鍵幀動畫，用於顯示何時添加類。您需要在移除該類時反向播放此動畫（本機支持CSS動畫：'屬性）。 –

對不起看更新https://jsfiddle.net/u6aztsgt/1/ – test

嘗試創建一個全新的動畫和切換，關於第二次點擊，反之亦然。你可以使用這個CSS的第二次點擊動畫，

@-webkit-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
@-moz-keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
@keyframes dropUp{from{margin-top: 0px;opacity: 1}to{margin-top: -20px;opacity: 0}} 
.a2, .b2, .c2 { 
    -webkit-animation: dropUp 1s; 
    -moz-animation: dropUp 1s; 
    animation: dropUp 1s; 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    animation-fill-mode: both; 
    opacity: 0; 
    display: block; 
} 

.a2 { 
    -webkit-animation-delay: 0s; 
    -moz-animation-delay: 0s; 
    animation-delay: 0s; 
} 

.b2 { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
} 

.c2 { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
}

來源

2016-12-27 04:59:56

ToggleClass使用jQuery進行動畫製作嗎？

回答

相關問題