中途停止悬停（）

Posted 2021-04-17

我为一个Dashboard（一个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

答案

只需在进入或离开元素时单击并检查该标志即可设置标志。

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/