javascript - 如何仅在正在使用的元素中触发事件 - jQuery

Question

重要

通过修改我的实际代码解决了这个问题。下面的简化代码应该按预期工作，因为我的实际代码没有工作，因为它是用函数和不同的布局制作的，但我现在意识到我犯了一个愚蠢的逻辑错误。

---

我试图在谷歌上找到这个但没有找到并回答，我不知道我是否没有正确地询问谷歌，但我想要实现的是这样的

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 中，现在它移动了不同部分中的所有标题。我怎样才能做到这一点？我确信这应该非常简单，但我一直无法弄清楚如何搜索此选择器!

谢谢!

Answer 1

看来你不需要做 children 因为 h1 是

的直接继承者

.animate-whats-inside 。你可以这样做

$('.animates-whats-inside').on('mouseenter', function() {
      $(this).find('h1').animate({
          opacity: 0.25,
          fontSize: "3em",
          height: "toggle"
        }, 5000)
      });

DEMO