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