Question

Here is my vertical menu
http://jsfiddle.net/3PD7D/13/

If you hover over the menu items named folders nothing happens however if you go to where the menu items should appear(to the right of the “folder” menu item(s)) the jquery fades in the submenu items. How do I get them to fade in when the user hovers over the parent “folder” menu item?

Edited
I apologize for not asking in the proper way. Here is the original code I should have posted. Many thanks to CasperOne and roasted for showing me the error of my ways.

$(document).ready(function(){

//Set the anchor link opacity to 0 and begin hover function
$("ul.child").css({"opacity" : 0}).hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    $(this).stop().animate({"opacity" : 1}, 200); 

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).stop().animate({"opacity" : 0}, 100); 

});

Answer 1

See there for a working sample.

$(document).ready(function(){ 

    //Set the anchor link opacity to 0 and begin hover function
    $("ul.child").parent().hover(function(){ 

        //Fade to an opacity of 1 at a speed of 200ms
        $(this).find("ul.child").stop().animate({"opacity" : 1}, 200); 

        //On mouse-off
        }, function(){

        //Fade to an opacity of 0 at a speed of 100ms
        $(this).find("ul.child").stop().animate({"opacity" : 0}, 100); 

    });

});​