Jquery finish on mouseout multiple events

Question

Okay so I am trying to make multiple animations happen, onmouseenter i have a bounce effect that uses finish(); on mouseout and onclick moves position problem is, if you click and and then move your mouse out of the div it finishes the click animation, i have tried using variables, .data and other various methods but have failed miserably and am looking for a quick solution.

Here is the jsfiddle: http://jsfiddle.net/FR5Lu/

Here is the code

$.fx.speeds._default = 1000;

$.fn.StartBounce = function() {
    var self = this; 
    (function runEffect() {
        self.effect('bounce', {distance:20}, 5000, runEffect);
    }) ();
    return this;
};

$('.iconeffect').mouseenter(function() {
            if (!$(this).is(":animated") ) {
    $(this).stop().StartBounce();
            }
});

$('.iconeffect').mouseout(function() {
    $(this).finish();
})

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        bounced = false;
        $(this).finish();
        $(this).stop(true, true).animate({ left: -50});
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {        
        $(this).finish();
        $(this).stop(true, true).animate({ left: 0});
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});

Answer 1

You can use a custom queue for your onclick animation so that it's not affected by the call to finish() on mouseout, also finish() is essentially the same as stop(true,true); so you don't need both in your click funciton:

$('#effect1').click(function() {
    if( $("#desc1").is(":hidden") ) {
        $(this).finish().animate({ left: -50},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 1000});
        $('#desc1').show( "blind", 1000);
    } else {        
        $(this).finish().animate({ left: 0},{queue:'show'}).dequeue('show');
        $('#effect2, #effect3').stop(true, true).animate({ left: 0});
        $('#desc1').hide( "blind", 1000);
    }
});

Here's the updated fiddle

Note that when you use a custom queue you need to explicitly call dequeue() to start the animation