jQuery动画只有一个项目（格）悬停（img）

情况是让jQuery只有一个元素动画时，另一个是悬停。现在，当悬停动作开始时，我会获得动画的所有项目。jQuery动画只有一个项目（格）悬停（img）

代码：

<table width="630" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img id="album_action" src="../upload/img/album1.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img id="album_action" src="../upload/img/album2.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
</table>

的jQuery：

$(document).ready(function(){ 
    $("#album_action").hover(function(){ 
     $('.album-back').stop().animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $('.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
});

当我将鼠标悬停ID为 “#album_action” 的img，我得到一个 “.album回” DIV移动。但动画开始于页面上的所有“.album-back”div elemens。如何在没有输入不同的类和ID的情况下只动画一个元素？也许有一些方法可以设置类并仅在当前活动（徘徊）内设置动作？非常感谢！

来源

2013-05-02 Wind

如果您在单个页面中为多个元素使用相同的ID，则称为无效HTML。 – Jai 2013-05-02 10:07:45

谢谢，Jai。我真的很想念它。非常感谢 - 给所有回答我的问题的人！ – Wind 2013-05-02 16:58:12

第一件事，你给一个ID两次。 ID应该是唯一的，因此只出现在一个元素上。

反而使用.album_action而不是#album_action。

二，为什么要使用表格？你不这样做，自上世纪80年代了:)

如果.action和.back都在同一水平上，你可以使用jQuery的兄弟姐妹

$(document).ready(function(){ 
    $(".album_action").hover(function(){ 
     $(this).siblings('.album-back').stop().animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $(this).siblings('.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
});

来源

2013-05-02 10:08:16 Alex

感谢您的信息！ – Wind 2013-05-02 17:00:46

id应该是唯一的，你需要使用class代替：

<img class="album_action" src="../upload/img/album2.jpg" width="285" height="246" />

然后你可以使用$(this)目标当前元素：

$(".album_action").hover(function(){ 
    $(this).prev('.album-back').stop().animate({'margin-left': '150px'}, 400); 
}, function(){ 
    $(this).prev('.album-back').stop().animate({'margin-left': '100px'}, 250); 
});

来源

2013-05-02 10:06:22 Eli

非常感谢，Eli！它完全按照我想要的方式工作。祝你今天愉快！ – Wind 2013-05-02 16:56:03

试试这个：

HTML

<table width="630" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img class="album_action" src="../upload/img/album1.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img class="album_action" src="../upload/img/album2.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
</table>

在HTML只有一个变化是img id由img class 为is更换必须unique。第一

SCRIPT

$(document).ready(function(){ 
    $(".album_action").hover(function(){ 
     $('.album-back').stop().animate({'margin-left': '100px'}, 250); 
     $(this).prev('div.album-back').animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $(this).prev('div.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
});

来源

2013-05-02 10:08:00

感谢您的信息！ – Wind 2013-05-02 17:01:49

我建议你到id更改为class，因为同一个页面中多个元素的id被称为无效html。

尝试改变ID类：

$(".album_action").hover(function(){ 
    $(this).siblings('.album-back').stop().animate({'margin-left': '150px'}, 400); 
}, function(){ 
    $(this).siblings('.album-back').stop().animate({'margin-left': '100px'}, 250); 
});

可以使用.siblings()找到在悬停元素的同一水平。

来源

2013-05-02 10:11:01 Jai

jQuery动画只有一个项目（格）悬停（img）

回答

相关问题