CODEWITHSUNDEEP
jqueryhtml
YSbakker
YSbakker

Reputation: 707

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/

Upvotes: 0

Views: 32

Answers (1)

Ajey
Ajey

Reputation: 8202

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

Upvotes: 2

Related Questions