YSbakker YSbakker - 5 months ago 8
HTML Question

jquery fadein child issue

Just a short question, probably some syntax mistake, but I can't seem to find it. I have a function that animates a div's height and width using an id. I'm also trying to

fadeIn()
the child paragraph using
$(this).find('p')
. Is this possible? I looked around and tried different syntaxes like
children()
. Here's the code concerned:

[JS]

$('#menu_item_1').hover(function () {
$(this).filter(':not(:animated)').animate({
width: "300px",
height: "255px",
marginTop: "-100px",
marginLeft: "-100px"
});

$(this).find('p').fadeIn();

}, function () {
$(this).animate({
width: "200px",
height: "155px",
marginTop: "0",
marginLeft: "0"
});
});


[HTML]

<div class="menuItem" id="menu_item_1">
<h5>Home</h5>
<p>Shows this page</p>
</div>


Also, a JSFiddle to demonstrate the issue: https://jsfiddle.net/w0uu5t7b/

Answer

Here is the demo

Remove the opacity:0 and make it display:none

And the $(this).find('p').fadeIn(); refers to the this of hover function and not jQuery.

So its better to store jQuery reference as var that = this and use it as a closure inside the hover function.

So on mouse enter you do $(that).find('p').fadeIn(); and on mouse leave you do $(that).find('p').fadeIn(); as simple as it can get.

P.S Read up more about javascript closures :P

Comments