停止懸停（）中途

Question

我設置了一個隱藏到hover()生效的儀表板（一個div）的動畫。 mouseOver div出現後，mouseOut div再次隱藏起來，簡單樸實 - 效果很好。

但我想添加另一個功能。我可以以某種方式停止mouseOut功能，即click()，這樣我就可以將鼠標移動到div之外，而不會像設想的那樣消失？並與click()功能相同，以恢復hover()函數的正常運行時間？

我對懸停（以防萬一）代碼：

$('#dashboard').hover(function() { 
         $(this).stop().animate ({left: '0',backgroundColor: 'rgb(255,255,255)'},400,'easeInSine'); //animate M.over 
           }, 
        function() { 
         $(this).stop().animate ({left: '-92px',backgroundColor: 'rgb(110,138,195)'},900,'easeOutBounce'); //animete M.out 
           }); // end hover 

Answer 1

，當你當你輸入點擊，並檢查標誌或離開元件只需設置一個標誌。

var disabled = false; 

$('#dashboard').click(function() { 
    // toggle the disabled 
    disabled = !disabled; 

}).hover(function() { 
    if (!disabled) { 
     $(this).stop().animate({ 
      left: '0', 
      backgroundColor: 'rgb(255,255,255)' 
     }, 400, 'easeInSine'); //animate M.over 
    } 
}, 
function() { 
    if (!disabled) { 
     $(this).stop().animate({ 
      left: '-92px', 
      backgroundColor: 'rgb(110,138,195)' 
     }, 900, 'easeOutBounce'); //animete M.out 
    } 
}); 

http://jsfiddle.net/R2PeL/1/