291 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
AkinGn says

I want to create a fade in effect when hovered to a li item that has a sub ul but I can’t. Here’s the structure of list:

<ul>
     <li class="group">Group A
            <ul>
                   <li>Item A-1</li>
                   <li>Item A-2</li>
                   <li>Item A-3</li>
            </ul>
     </li> 

     <li class="group">Group B
            <ul>
                   <li>Item B-1</li>
                   <li>Item B-2</li>
                   <li>Item B-3</li>
            </ul>
     </li> 

</ul>

since I haven’t done any major things in jquery, I just try to achieve a hover fade in/out effect via the script:

$(document).ready(function(){
    $("li.group").hover(
         function() { $("li.group ul").fadeIn("slow");
        },
        function() { $("li.group ul").fadeOut("slow");
    });
});    

but as you guys guess, when I hover over a li.group item, all sub uls (both Group A and B’s) fade in and out. I think I made my point here, I want just Group A’s sub ul to be faded in when I hover over Group A. Can any jquery knowing developer help me, thanks..

1383 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
wpCanyonThemes says
$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    
291 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
AkinGn says

$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    

Thanks wpCanyonThemes, it works !

1383 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
wpCanyonThemes says


$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    
Thanks wpCanyonThemes, it works !

You’re welcome :)

381 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 more
redfactory says



$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    
Thanks wpCanyonThemes, it works !
You’re welcome :)

Just wondering, wouldn’t that be the same as this?

$(document).ready(function(){
    $("li.group").hover(
         function() { $('ul', this).fadeIn("slow");
        },
        function() { $('ul', this).fadeOut("slow");
    });
});

Is one of the solutions faster then the other?

291 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
AkinGn says




$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    
Thanks wpCanyonThemes, it works !
You’re welcome :)

Just wondering, wouldn’t that be the same as this?

$(document).ready(function(){
    $("li.group").hover(
         function() { $('ul', this).fadeIn("slow");
        },
        function() { $('ul', this).fadeOut("slow");
    });
});
Is one of the solutions faster then the other?

I dunno which one of these two solutions is more semantic or something, but they both work, thanks for sharing Red Factory ;)

3503 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator says

Just wondering, wouldn’t that be the same as this?
$(document).ready(function(){
    $("li.group").hover(
         function() { $('ul', this).fadeIn("slow");
        },
        function() { $('ul', this).fadeOut("slow");
    });
});
Is one of the solutions faster then the other?

Yes, they are the same. I think I’ve read that your solution (passing a context) is marginally faster (than using find()) because of the way the jQuery parser works, but I’m not sure of the specifics – and I think the difference is negligible.

EDIT : You might find this interesting – http://jsperf.com/jquery-find-versus-context-versions-1-4-2-to-1-5

3503 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator says

Actually, after a little more research I found this in the jQuery API docs.

Internally, selector context is implemented with the .find() method, so $(‘span’, this) is equivalent to $(this).find(‘span’).

So if anything I’m guessing find() should be slightly faster :)

See also:

http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/

http://www.iliadraznin.com/2011/04/optimizing-javascript-jquery/

381 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 more
redfactory says

Actually, after a little more research I found this in the jQuery API docs.
Internally, selector context is implemented with the .find() method, so $(‘span’, this) is equivalent to $(this).find(‘span’).

So if anything I’m guessing find() should be slightly faster :)

See also:

http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/

http://www.iliadraznin.com/2011/04/optimizing-javascript-jquery/

Nice! Thanks for the posts! Didn’t know that :)

294 posts
  • Had an item featured on Envato Market
  • Contributed a free file of the month
  • Has referred 200+ members
  • Has sold $10,000+ on Envato Market
+4 more
amatyr4n says

To attach the event only to li which contains ul, you could also take advantage of jQuery :has pseudo selector

$('li.group:has(ul)')

or

$('#ul').children('li:has(ul)')

though not sure about performance everyone mentioned here :P

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by