javascript – 具有相同类的对象上的动画,一次一个

我试图在页面上的所有元素上运行动画悬停效果.我的问题是,当我超越它们中的任何一个时,它会激活它们.

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

所有的盒子都有相同的类动漫.所以我只想弄清楚当你将鼠标悬停在一个上时如何只动画,而不是给你们所知的所有单独的课程？

我知道这是一个简单的问题,但我还在学习jQuery的方法:)所以请耐心等待

这是HTML：

<div class="anime">

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

解决方法:

一般来说,他们实现这一目标的方法是使用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.的更多功能

标签：javascript,jquery,jquery-animate
来源： https://codeday.me/bug/20190726/1543604.html