jquery - 中途停止 hover()

Question

我为仪表板（一个 div）设置动画，该仪表板hover()在生效之前一直隐藏。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/