在同一个类的对象上一次动画

Question

我试图在页面上的所有元素上运行动画悬停效果。我的问题是，当我将它们放在任何一个上时，都会使它们全部动起来。

$('div.anime').hover( function() {
$('.box').animate({'do something cool'});
});

所有的盒子都属于同一类anime。因此，我只是想弄清楚如何仅将鼠标悬停在一个上而没有给它们所有单独的类进行动画处理？

我知道这是一个简单的问题，但我仍在学习jQuery的方法:)所以请多多包涵

这是HTML：

<div class="anime">

<div class="box">Hey show me! Im cool!</div>
</div>

Answer 1

一般而言，使用它们可以完成此操作的方式是使用this关键字指定要悬停的项目，然后this通过遍历DOM树来选择要进行动画处理的DOM元素。

例

给定以下HTML

<div class="anime">

    <p>other stuff</p>

    <div class="box">
        <p>content</p>
    </div>

</div>

此javascript（使用jQuery）将仅选择和设置.box悬停在其上的动画，.anime因为我正在使用该.find()函数来遍历与$(this)（悬停的元素）有关的DOM 。

$('div.anime').hover( function() {
    $(this).find('.box').animate({'do something cool'});
});

您可以在此处阅读更多内容并找到更多用于遍历DOM的函数。