javascript - 同一类对象上的动画，一次一个

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)将仅选择和动画化包含在悬停在 .anime 中的 .box，因为我使用的是 .find()遍历与 $(this)(悬停的元素)相关的 DOM 的函数。

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

您可以阅读更多内容并找到 Traversing the DOM here. 的更多功能