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

2019-07-26 11:34:32 阅读：204 来源： 互联网

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

$('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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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