クラス名に応じて要素をアニメ化する

Question

2つのdiv（.cardと.slotと呼ばれる）を含む順序付けられていないリストがあります。.cardアニメーションを1つずつ作成したいと思います（つまり、最初の.cardをクリックするとアニメーション化されます次の '.card'をクリックすると、最初の背を元の高さに戻します。アイデアは1つの '.card'だけが高さに設定されます。

私は現在クリックされた（ '.cards'）から削除され、 '.cards'のリストをたどって現在のクリックをアニメートし、他のものをリセットします。

しかし、私は問題があります。もし誰かが私を右の方向に向けることができれば私はそれを感謝します。ここ

は、コード例です

http://pastebin.com/XsswqCsU

ありがとうございます！

無料マイクタイソン！

Answer 1

私は完全にカードとスロットの使用を理解していないが、あなたは（あなたの特定のHTMLに適合させることができる）、一般的にこのようなコードを使用することができます：

<ul> 
<li><div class="card">Card 1</div><div class="slot"></div></li> 
<li><div class="card">Card 2</div><div class="slot"></div></li> 
<li><div class="card">Card 3</div><div class="slot"></div></li> 
<li><div class="card">Card 4</div><div class="slot"></div></li> 
</ul>​ 

$(".card").click(function() { 
    var this$ = $(this); 
    var slot$ = this$.closest("li").find(".slot"); 
    if (!slot$.hasClass("expanded")) { 
     this$.closest("ul").find(".expanded") 
      .removeClass("expanded") 
      .animate({height: "20px"}); 
     slot$.addClass("expanded").animate({height: "200px"}); 
    } 
});​ 

が行動でそれをここで参照してください。 ：http://jsfiddle.net/jfriend00/Bc73Y/