Question

我有一个包含两个div的无序列表（称为.card和.slot）我希望一次一个地使用.card动画（即第一个单击的.card会动画到一个凸起的高度。点击在下一个'.card'上将第一个回到原来的高度。这个想法只有一个'.card'设置为高度提升。

我想给当前点击的'.card'一个类（'.current'），添加到每个新的onclick事件中（从剩余的（'.cards'）中删除。然后遍历'.cards'列表设置点击的当前动画并重置其他任何动画。

但我遇到了麻烦。如果有人能指出我正确的方向，我会很感激。

这是代码示例

http://pastebin.com/XsswqCsU

谢谢！

免费Mike Tyson！

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/

动画元素取决于类名

1 个答案: