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。

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

Answer 4

我建议您将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()查找悬停元素的相同级别。

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

4 个答案: