jQuery在悬停（img）时只为一个项目（div）设置动画答案

【问题标题】：jQuery animate only one item (div) on hover (img)jQuery在悬停（img）时只为一个项目（div）设置动画
【发布时间】：2013-05-02 10:02:36
【问题描述】：

这种情况是让 jQuery 在另一个元素悬停时只对一个元素进行动画处理。现在，当悬停动作开始时，我得到所有项目的动画。

代码：

<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-back" div 移动。但是页面上所有“.album-back” div 元素的动画都会开始。如何在不输入不同的类和 ID 的情况下只为一个元素设置动画？也许有一些方法可以设置类并仅在当前活动（悬停）内设置操作？非常感谢！

【问题讨论】：

如果你对一个页面中的多个元素使用相同的id，则称为无效的html。
谢谢，杰。我真的很想念它。非常感谢您 - 感谢所有回答我问题的人！

标签： javascript jquery animation jquery-animate

【解决方案1】：

首先，你给了一个 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);
    });
});

【讨论】：

【解决方案2】：

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

【讨论】：

非常感谢，伊莱！它完全按照我的意愿工作。祝你有美好的一天！

【解决方案3】：

试试这个：

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。

脚本

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

【讨论】：

【解决方案4】：

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

尝试将 id 更改为 class：

$(".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() 来查找悬停元素的同一级别。

【讨论】：