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);
});

Updated fiddle

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

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

Example fiddle

Answer 2

我要做的是使用其他类型的jquery选择器，可能基于父级，就像这样：

$(".parent > div").each(function(i){

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

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

});

将它们包装在父div中！刚试过你的小提琴，工作正常！但请记住，拥有相同值的多个ID是不好的形式。

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

2 个答案: