Javascript jQuery弹出窗口在快速鼠标切换时闪烁

在缓慢的鼠标进入和离开转换中，弹出窗口可以顺利工作。但在快速转换时，有时会闪烁，有时会在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);
});

下面是一个工作示例：

如何修复

---

提前谢谢

这个问题实际上不是Javascript问题。它正在执行你要它执行的命令。最好只是在div中设置动画，使其感觉平滑

最简单的方法是使用jqueryanimate

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转换