jQuery在悬停时仅动画一个项目（div）（img）

Question

当另一个元素悬停时，情况是让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 elemens。 如何在不输入不同类和ID的情况下仅动画一个元素？ 也许有一些方法可以设置类和仅在当前活动（悬停）内部设置操作？ 非常感谢！

Answer 1

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

Answer 2

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

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

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