286 posts
  • Bought between 1 and 9 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Turkey
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
wpCanyonThemes says
$(document).ready(function(){
    $("li.group").hover(
         function() { $(this).find('ul').fadeIn("slow");
        },
        function() { $(this).find('ul').fadeOut("slow");
    });
});    
286 posts
  • Bought between 1 and 9 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Turkey
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
  • Bought between 10 and 49 items
+1 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?

286 posts
  • Bought between 1 and 9 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Turkey
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 ;)

3424 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • United States
  • Has been a member for 4-5 years
+5 more
sevenspark Volunteer 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

3424 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • United States
  • Has been a member for 4-5 years
+5 more
sevenspark Volunteer 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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
  • Bought between 10 and 49 items
+1 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 :)

293 posts
  • Author had a Free File of the Month
  • Sold between 10 000 and 50 000 dollars
  • Indonesia
  • Referred between 200 and 499 users
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
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

by
by
by
by
by
by