Анимированные элементы в зависимости от имени класса

Question

У меня есть неупорядоченный список, содержащий два div (обозначаемые как .card и .slot). Я хотел бы иметь анимацию .card, по одному (т.е. первая. на верхнюю высоту. Нажатие на следующую «.card» оживит первую спину до ее первоначальной высоты. Идея состоит только в одной «.card», которая задана с поднятой высотой.

Я думал, '.card' класс ('.current'), добавленный к каждому новому событию onclick (удаляется из оставшегося («.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/