重要
通过修改我的实际代码解决了这个问题。下面的简化代码应该按预期工作,因为我的实际代码没有工作,因为它是用函数和不同的布局制作的,但我现在意识到我犯了一个愚蠢的逻辑错误。
我试图在谷歌上找到这个但没有找到并回答,我不知道我是否没有正确地询问谷歌,但我想要实现的是这样的
HTML:
<div class="animates-whats-inside">
<h1>This title will be animated when you put the cursor on my parent</h1>
</div>
<div class="animates-whats-inside">
<h1>This title will be animated when you put the cursor on my parent</h1>
</div>
jQuery:
$('.animates-whats-inside').on('mouseenter', function() {
$(this).children().find('h1').animate(...);
});
编辑细节:
如果我将鼠标移动到第一个 div 中,我只想移动第一个 div 中的标题,而不是第二个 div 中的标题,如果我将鼠标移动到第二个 div 中,则移动标题在第二个 div 中而不是在第一个 div 中,现在它移动了不同部分中的所有标题。我怎样才能做到这一点?我确信这应该非常简单,但我一直无法弄清楚如何搜索此选择器!
谢谢!
最佳答案
看来你不需要做 children
因为 h1
是
.animate-whats-inside
。你可以这样做
$('.animates-whats-inside').on('mouseenter', function() {
$(this).find('h1').animate({
opacity: 0.25,
fontSize: "3em",
height: "toggle"
}, 5000)
});
关于javascript - 如何仅在正在使用的元素中触发事件 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40168677/