在不同的对象上应用相同的id并单独为它们设置动画(jQuery)

Question

假设我有一排像这里的div:jsfiddle.net/AlphaCrack/veuc80he/1/

我不想单独为它们制作动画,但要保持相同的ID,因为我可能需要创建大量的div,我不想创建大量的CSS ID.如您所见,在多个元素上应用相同的id将仅影响第一个.为什么？我该怎么做才能使用相同的ID分别为它们设置动画.

HTML:

<div id="TEST">
</div>
<div id="TEST">
</div>
<div id="TEST">
</div>
<div id="TEST">
</div>

CSS:

#TEST
{
    width: 100px;
    height: 100px;
    background-color: #252525;
    border: 1px solid #AAFF00;
    float: left;
}

jQuery:

$("#TEST").mouseenter(function(){
    $("#TEST").stop();
    $("#TEST").animate({"height":"200px"},200);
});

$("#TEST").mouseleave(function(){
    $("#TEST").stop();
    $("#TEST").animate({"height":"100px"},200);
});

实际上我有大量的动画帧(具有相同的id)从我的数据库中保存我的每个图像.当我悬停图片时,我需要单独为每个帧设置动画.

Answer 1

首先,id在单个页面中具有重复属性是无效的,因为它们必须是唯一的.这就是为什么只有第一个元素受到您的事件的影响.请改用一个班级.

<div class="test"></div>

然后在您的JS中,您可以使用公共类来停止.test元素上的所有动画,并this仅引用引发事件的动画.

$(".test").mouseenter(function () {
    $(".test").stop();
    $(this).animate({ "height": "200px" }, 200);
}).mouseleave(function () {
    $(".test").stop();
    $(this).animate({ "height": "100px" }, 200);
});

更新了小提琴

您还可以简化要使用的代码hover,这样可以消除在stop()快速悬停在元素上时偶尔导致错误对齐的需要:

$(".test").hover(
    function() { $(this).animate({ "height": "200px" }, 200); }, 
    function() { $(this).animate({ "height": "100px" }, 200); }
);

示例小提琴