jQuery: correct way to bind(); and unbind(); with mouseover, mouseout, and click

Question

I am making an interactive map with jQuery and have some problems that I can't solve.

1. Basically, when I click on the black square I want it to turn red right away, right now it works opposite (it turns red from the second click). Is there a way to reverse fadeToggle(); function? But, I still want to keep fading animation on mouseover and mouseout event.

2. Second problem is, after clicking on a black square "alone" or clicking on the "option links" on the left it turns red, but doesn't stays red when I hover over it. (I want to unbind somehow mouseover and mouseout events after square is clicked). And only fade out it to 0, when I click on it again.

Demo: http://jsfiddle.net/antondesign/8JHCe/

jQuery script

$('ul.list li a').click(function(e) {
    e.preventDefault();
    var productTitle = $(this).attr("title");
        $('.p-'+ productTitle).siblings().hide();
        $('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
        $('.p-'+ productTitle).unbind('mouseover mouseout');     
    });

// Check if map exists
if($('#map')) {

    // Loop through each AREA in the imagemap
    $('#map area').each(function() {
        var productIcon = $(this).attr('id').replace('area-', '');   

        // Assigning an action to the click event
        $(this).click(function(e){  
            e.preventDefault();              
            $('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
            $(this).unbind('mouseover').unbind('mouseout');
            });
        });            

    // Assigning an action to the mouseover event
        $(this).bind("mouseover", function(e) {
            $('#'+productIcon).stop(true, true).fadeTo(500, 1);
            e.preventDefault();
         });

    // Assigning an action to the mouseout event
        $(this).bind("mouseout", function(e) {
            $('#'+productIcon).stop(true, true).fadeOut(500, 0);
            e.preventDefault();
        });

   });

}

Answer 1

You can apply some class to the clicked elements and then in the mouseover and mouseout events, check if the class is applied before fading out or performing any operation. I've updated your jsfiddle code, you can check it here:

http://jsfiddle.net/8JHCe/8/

Hope this helps.