使用jQuery和CSS同時動畫2個對象

Question

我正在嘗試做動畫。這個動畫由一個Button（來自Bootstrap的glyphicon-plus-sign）和一個寬度爲12％的Box-Content組成。當我們點擊按鈕時，它會旋轉到負向，同時用jQuery自定義動畫animate（）打開Box-Content寬度：40％。現在我的問題是：我不知道如何將Box-Content返回到原始寬度，同時再次將按鈕旋轉到正方向。 這裏是jQuery代碼：

$(document).ready(function(){ 
    function showNav(){ 
     $('.glyphicon-plus-sign').toggleClass('animate-open-button'); 
     $('.wrapper').animate({ 
      width:'40%' 
     },{ 
      queue:false, 
      duration:3000 
     }) 
     $('nav ul li a').css('opacity','1'); 
    } 

    function hideNav(){ 
     $('.glyphicon-plus-sign').toggleClass('animate-close-button'); 
     $('.wrapper').animate({ 
      width:'12%' 
     },{ 
      queue:false, 
      duration:3000 
     }) 
     $('nav ul li a').css('opacity','0'); 
    } 

    $('.glyphicon-plus-sign').on('click', function(){ 
     // if (hideNav()) { 
      showNav(); 
     // }else{ 
      // hideNav(); 
     // } 
    }); 
}) 

爲動畫一些CSS風格：

.wrapper{ 
    width: 12%; 
} 
nav ul li a{ 
    opacity:0; 
    -webkit-transition: opacity .80s ease; 
} 
.glyphicon-plus-sign.animate-close-button{ 
    animation: close linear 3s; 
    animation-iteration-count: 1; 
    -webkit-animation: close linear 3s; 
    -webkit-animation-iteration-count: 1; 

    -moz-animation: close linear 3s; 
    -moz-animation-iteration-count: 1; 

    -o-animation: close linear 3s; 
    -o-animation-iteration-count: 1; 

    -ms-animation: close linear 3s; 
    -ms-animation-iteration-count: 1; 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 
@keyframes close{ 
    0% { 
    transform: rotate(-225deg); 
    } 
    100% { 
    transform: rotate(0deg); 
    } 
} 
@-moz-keyframes close{ 
    0% { 
    -moz-transform: rotate(-225deg); 
    } 
    100% { 
    -moz-transform: rotate(0deg); 
    } 
} 
@-webkit-keyframes close{ 
    0% { 
    -webkit-transform: rotate(-225deg); 
    } 
    100% { 
    -webkit-transform: rotate(0deg); 
    } 
} 
@-o-keyframes close{ 
    0% { 
    -o-transform: rotate(-225deg); 
    } 
    100% { 
    -o-transform: rotate(0deg); 
    } 
} 

@-ms-keyframes close{ 
    0% { 
    -ms-transform: rotate(-225deg); 
    } 
    100% { 
    -ms-transform: rotate(0deg); 
    } 
} 

.glyphicon-plus-sign.animate-open-button{ 
    font-size: 2.7em; 
    animation: open linear 3s; 
    animation-iteration-count: 1; 
    -webkit-animation: open linear 3s; 
    -webkit-animation-iteration-count: 1; 

    -moz-animation: open linear 3s; 
    -moz-animation-iteration-count: 1; 

    -o-animation: open linear 3s; 
    -o-animation-iteration-count: 1; 

    -ms-animation: open linear 3s; 
    -ms-animation-iteration-count: 1; 
    -ms-transform: rotate(-225deg); 
    -o-transform: rotate(-225deg); 
-webkit-transform: rotate(-225deg); 
     transform: rotate(-225deg); 
} 

@keyframes open{ 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(-225deg); 
    } 
} 

@-moz-keyframes open{ 
    0% { 
    -moz-transform: rotate(0deg); 
    } 
    100% { 
    -moz-transform: rotate(-225deg); 
    } 
} 

@-webkit-keyframes open{ 
    0% { 
    -webkit-transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(-225deg); 
    } 
} 

@-o-keyframes open{ 
    0% { 
    -o-transform: rotate(0deg); 
    } 
    100% { 
    -o-transform: rotate(-225deg); 
    } 
} 

@-ms-keyframes open{ 
    0% { 
    -ms-transform: rotate(0deg); 
    } 
    100% { 
    -ms-transform: rotate(-225deg); 
    } 
} 

而且這裏的HTML：

<div class="wrapper container-fluid"> 
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>   
    <div class="col-xs-12 col-sm-12 col-md-12 main-nav"> 
     <nav> 
      <ul> 
       <li><a href="">site1</a></li> 
       <li><a href="">site2</a></li> 
       <li><a href="">site3</a></li> 
       <li><a href="">site4</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

在這裏你可以更好的看到這個動畫，瞭解我的意思是。鏈接：jsfiddle/Mobile-navigation或在這裏：codepen.io/Mobile-navigation我非常感謝每一個幫助。謝謝！

Answer 1

尋找它，我意識到hideNav（）函數添加了類「animate-close-button」，但沒有刪除類「animate-open-button」，因爲toggleClass刪除並添加了相同的類。所以這裏一個選擇可能是加入了removeClass（ '動畫打開按鈕'）時hideNav（）函數觸發，就像這樣：

function hideNav(){ 
    $('.glyphicon-plus-sign').removeClass('animate-open-button'); 
    $('.glyphicon-plus-sign').toggleClass('animate-close-button'); 
    ... 

這同樣適用於在showNav（）：

function showNav(){ 
    $('.glyphicon-plus-sign').removeClass('animate-close-button'); 
    $('.glyphicon-plus-sign').toggleClass('animate-open-button'); 
    ... 

現在的點擊，我們需要檢查weither的glyphicon有「動畫打開按鈕」，或「動畫關閉按鈕」類：

$('.glyphicon-plus-sign').on('click', function(){ 
    if ($('.glyphicon-plus-sign').hasClass('animate-open-button')) { 
     hideNav(); 
    }else{ 
     showNav(); 
    } 
}); 

希望這有助於 獅子座。