更好的解決剿「鼠標離開」暫時

Question

基本上我取消綁定mouseleave被點擊的元素之後。但我想有mouseleave -event該元素被點擊另一個元素再次工作。我的代碼正在工作，但感覺很龐大，因爲我在代碼中重複動畫。

難道就沒有別的方法來剿了mouseleave比解除綁定和「重新綁定」暫時其它？有什麼建議麼 ？

Here's my example on jsfiddle

HTML

<div class="container"> 
CONTAINER ONE 
</div> 

<div class="container"> 
CONTAINER TWO 
</div> 

JS：

$(document).ready(function() 
{ 
    //the default hover-event 
    $('.container').hover(
     function(){ 
       $(this).stop().animate({'padding-bottom':'10px'},{queue:false,duration:160}); 
     }, 
     function() { 
       $(this).stop().animate({'padding-bottom':'0px'},{queue:false,duration:160}); 
     } 
    ); 



    $('.container').click(function(e) { 
     e.preventDefault(); 

     // enables the mouseleave for all other `.container`s again. 
     // also bring the old clicked element into unhovered position again 
     $('.container') 
       .bind('mouseleave',function() { 
        $(this).stop().animate({'padding-bottom':'0px'},{queue:false,duration:160}); 
       }).not(this).stop().animate({'padding-bottom':'0px'},{queue:false,duration:160}); 

     // supress the mouseleave for the clicked element 
      $(this).unbind('mouseleave'); 
    }) 

}); 

Answer 1

這可能是一個更好的辦法（example）：

$(document).ready(function() 
{ 
    var over = function(){ 
     $(this).stop().animate({'padding-bottom':'10px'},{queue:false,duration:160}); 
    }; 
    var out = function() { 
     $(this).stop().animate({'padding-bottom':'0px'},{queue:false,duration:160}); 
    }; 
    //the default hover-event 
    $('.container').hover(over, out); 



    $('.container').click(function(e) { 
     e.preventDefault(); 

     // enables the mouseleave for all other `.container`s again. 
     // also bring the old clicked element into unhovered position again 
     $('.container').bind('mouseleave', out).not(this).each(out); 

     // supress the mouseleave for the clicked element 
     $(this).unbind('mouseleave'); 
    }) 
});