Juan Bonnett Juan Bonnett - 1 month ago 7
CSS Question

How to trigger event only in the element in use - jQuery

IMPORTANT

Solved this problem by modifying my actual code. The simplified code below should work as expected, by my actual code wasn't working since it was made with functions and a different layout, but I now realized I made a silly logic mistake.




I tried to find this on google and haven't found and answer, I don't know if I'm not asking google properly, but what I want to achieve is something like this

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(...);
});


EDITED DETAILS:

I if I move the mouse inside the first div I want to move only the title inside the first div but not the one in the second div, and if I move the mouse inside the second div, move the title inside the second div but not the one inside the first, right now it moves all the titles in the different sections. How can I achieve this? I'm sure this should be very simple, but I haven't been able to figure out how to search for this selector!

Thanks beforehand!

Answer

It seems you dont need to do children since h1 is direct decedent of

.animate-whats-inside . You can do like this

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

DEMO