Best Practice Combining Toggle and Hover

I have some elements which have hover effects as well as should be selected when clicked. Currently when I add the stop() to the effect it causes the animation to stop in place when clicked. I tried using fadeToggle() for the same effect but could not wrap my head around how to get it to function properly. The id I am targeting are passed to the href of the clicked element.

Can someone give pointers on the best way to write this script?

$(function() {
    $("#map-hovers > ul > li").hide();
    $('area').click(function(e) {
        e.preventDefault();
        var $hoodClick = $($(this).attr('href'));
        if ($hoodClick.hasClass('selected')) {
            $($hoodClick).fadeOut().removeClass('selected');
        } else {
            $($hoodClick).fadeIn().addClass('selected');
        }
    }).hover(function() {
        var $hoodHoverOver = $($(this).attr('href'));
     开发者_运维技巧   $hoodHoverOver.fadeIn();
    },
    function() {
        var $hoodHoverOut = $($(this).attr('href'));
        if ($hoodHoverOut.hasClass('selected')) {
            } else {
            $hoodHoverOut.fadeOut();
        }
    })
});  

Use .stop(true, true). It skips to the end of the animation & clears the animation queue. Read more about it in the API: http://api.jquery.com/stop/