Div的動畫作爲一個，而不是單獨的

Question

我試圖使我的網站上的動畫材料設計。正如你所看到的，當我按下按鈕時，它們中的每一個都會動畫，而不是隻動畫我按下的那個。編輯：我做了gif之後，我設法得到了一個流暢的動畫，但它們仍然是一個動作。 http://oi59.tinypic.com/29ek9wx.jpg這是我得到的動畫。 這裏是我的查詢代碼：

$(document).ready(function() { 
    var toggleState = true; 
    $('.show').on("click", function() { 
     if(toggleState) { 
      $(this).find('svg').each(function(){ 
       $(this).css({ 
        transform: "rotate(180deg)" 
       }); 
      }); 
      $(document).find('.box').each(function(){ 
       $(this).css({ 
        height: "+=200" 
       },1000); 
      }); 
     } else { 
      $(this).find('svg').each(function(){ 
       $(this).animate({ 
        transform: "rotate(+=180deg)", 
       }); 
      }); 
      $(document).find('.box').each(function(){ 
       $(this).css({ 
        height: "240" // this is the default height 
       },1000); 
      }); 
     } 
     toggleState = !toggleState; 
    }); 
}); 
// .show is the container of the svg(the arrow). .box is the container of the whole thing 

PS：我做管理.gif文件後得到一個平滑的動畫，唯一的問題是他們作爲一個。 PS2：不介意光標。

更多代碼。

<div class="fluid-layout"> 
    <article class="box-wrapper"> 
     <section class="box"> 
      <div class="main-color" id="red"> 
      </div> 
      <div class="show"> 
       <svg class="svg" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"> 
        <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/> 
        <path d="M0 0h36v36h-36z" fill="none"/> 
       </svg> 
      </div> 
     </section 
     ><section class="box"> 
      <div class="main-color" id="pink"> 
      </div> 
      <div class="show"> 
       <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"> 
        <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/> 
        <path d="M0 0h36v36h-36z" fill="none"/> 
       </svg> 
      </div> 
     </section 
     ><section class="box"> 
      <div class="main-color" id="purple"> 
      </div> 
      <div class="show"> 
       <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"> 
        <path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/> 
        <path d="M0 0h36v36h-36z" fill="none"/> 
       </svg> 
      </div> 
     </section 
     > 
    </article> 
</div> 

Answer 1

我想從這裏的代碼

$(document).find('.box').each(function(){ 
      $(this).css({ 
       height: "240" // this is the default height 
      },1000); 

和

$(document).find('.box').each(function(){ 
      $(this).css({ 
       height: "+=200" 
      },1000); 
     }); 

您正在搜索文檔的框類，並在應用CSS所有的那些方框的問題莖同時。如果我知道你的那些盒子的html結構，我可以幫你解決這個問題。

看到http://api.jquery.com/closest/的文檔與最接近（）

編輯：

與

$(this).closest('.color-group').each(function(){ 

更換

$(document).find('.box').each(function(){ 

將有助於解決特定問題。請參閱http://jsfiddle.net/FERMIS/5dLyqsyu/3/

但是，這些框現在會變得很奇怪。爲了解決這個問題，你需要做一些CSS工作。

刪除

display: table-cell; 

從

.fluid-layout .color-group .main-color span { 

然後加入CSS的新塊回到中心，是由除CSS

.main-color span{ 
    display:block; 
    line-height: 5em; 
} 

http://jsfiddle.net/FERMIS/5dLyqsyu/4/的前行搞砸文本