Question

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/

如何解决？

提前致谢！

Answer 1

问题不是真正的Javascript问题。它执行你告诉它执行的命令。在div中制作动画可能会更好，这样它就会感觉很顺畅。

最简单的方法是使用jQuery动画。

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

jQuery Popup在快速鼠标转换时闪烁

1 个答案: