快速鼠标转换时 jQuery Popup 闪烁答案

【问题标题】：jQuery Popup flickers on fast mouse transition快速鼠标转换时 jQuery Popup 闪烁
【发布时间】：2014-10-23 14:46:30
【问题描述】：

Popup 在缓慢的鼠标进入和离开过渡中运行顺畅。但是在快速过渡时，有时会闪烁，有时会在将鼠标悬停在 div 元素上时完全停止出现。

jQuery 中的代码：

var flag = 1;

jQuery('#hover').mouseenter(function(){
    jQuery('#popup').show();
});

jQuery('#popup').mouseenter(function(){
    flag = 0;
    jQuery('#popup').show();
});

jQuery('#popup').mouseleave(function(){
    flag = 1;
    jQuery('#popup').hide();
});

jQuery('#hover').mouseleave(function(){
    setTimeout(function() { if (flag == 1) jQuery('#popup').hide();}, 400);
});

这是一个工作示例：http://jsfiddle.net/et65am4c/

如何解决？

提前致谢！

【问题讨论】：

标签： javascript jquery html popup hover

【解决方案1】：

这个问题并不是真正的 Javascript 问题。它正在执行您告诉它执行的命令。最好只在 div 中设置动画，以使其感觉流畅。

最简单的方法是使用 jQuery animate。

var flag = 1;
jQuery('#hover').mouseenter(function(){
    jQuery('#popup').stop().show('fast');
});

jQuery('#popup').mouseenter(function(){
    flag = 0;
    jQuery('#popup').stop().show('fast');
});

jQuery('#popup').mouseleave(function(){
    flag = 1;
    jQuery('#popup').stop().hide('fast');
});

jQuery('#hover').mouseleave(function(){
    setTimeout(function() { if (flag == 1) jQuery('#popup').stop().hide('fast');}, 400);
});

不过，更好的方法是使用 opacity 属性使用 CSS 过渡。

【讨论】：