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();
        });

   });

}

Solution

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.

Comments

[Admin]

First of all thank thank you for your help. I have another question, is it possible to toggle animation , while you are mouseover on the red square.

[Vishal]

I didn't get your point. Can you please explain what do you mean by toggling on mouseover? Do you want the red square to go black when you mouseover?

[Admin]

Sorry, could've explain it better. While you hovering the red square, is it possible on click to fade it out to black right away (while your mouse is on that square)? Right now, you need to move you mouse out from that square to see the fadeOut effect.

[Admin]

That exactly what I was looking for, thanks a lot for your time!