1

这种情况是让 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 的情况下只为一个元素设置动画？也许有一些方法可以设置类并仅在当前活动（悬停）内设置操作？非常感谢！

4

4 回答 4

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);
});
于 2013-05-02T10:06:22.547 回答
1

尝试这个：

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 as ismust be 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);
    });
});
于 2013-05-02T10:08:00.033 回答
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);
    });
});
于 2013-05-02T10:08:16.240 回答
0

我建议您将其更改为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()来查找悬停元素的同一级别。

于 2013-05-02T10:11:01.137 回答