анимировать элементы в зависимости от имени класса - PullRequest
Новая
       10

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

0 голосов
/ 03 марта 2012

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

Я думал дать текущую нажатую «.card»класс ('.current'), добавляемый к каждому новому событию onclick (удаляется из оставшихся ('.cards'). Затем перемещается по списку '.cards', чтобы анимировать текущее нажатие и сбрасывать все остальные.

но у меня проблемы. Если кто-нибудь может указать мне правильное направление, я был бы признателен.

вот пример кода

http://pastebin.com/XsswqCsU

Спасибо!

Свободный Майк Тайсон!

1 Ответ

0 голосов
/ 03 марта 2012

Я не уверен, что полностью понимаю ваше использование карты и слота, но вы можете использовать код, как правило (например, который может быть адаптирован к вашему конкретному 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/

...