Question

我希望以下功能以防止用户发送mouseenter，mouseleave功能的方式运行，以便只有在淡入淡出操作完成后它们才能操作mouseenter / leave功能。我该怎么办？

$("#bocks").mouseenter(function(){ $("#bocks2").fadeOut(); }); $("#bocks").mouseleave(function(){ $("#bocks2").fadeIn(); });

http://jsfiddle.net/x2qNZ/

Answer 1

试试这个：

var blocked = false;
function unblock() {
    blocked = false;
}
$("#bocks").mouseenter(function(){ 
   if (blocked) return;
   blocked = true;
   $("#bocks2").fadeOut(unblock); 
}); 
$("#bocks").mouseleave(function(){ 
   if (blocked) return;
   blocked = true;
   $("#bocks2").fadeIn(unblock);
});

您还可以删除事件侦听器并将其再次放在unblock（）函数中。

Answer 2

FadeIn / Fade out有完成回调。

http://jsfiddle.net/x2qNZ/3/

我已经更新了小提琴以禁用fadeIn，如果我们正在积极fadingOut。

var isFiring = false;
    $("#bocks").mouseenter(function(){
        isFiring = true;
        $("#bocks2").fadeOut(1000, function(){
            isFiring = false;
        }); 
    });
    $("#bocks").mouseleave(function(){
        if(!isFiring){
          $("#bocks2").fadeIn();
        } else {
           console.log('fire ignored');
        }

    });

Answer 3

查看更新的小提琴

var mouseenterbusy = false;
var mouseleavebusy = false;
$("#bocks").mouseenter(function(){
    if (mouseenterbusy == true) {
        return;
    }
    mouseenterbusy = true;
    $("#bocks2").fadeOut(function (){
       mouseenterbusy = false;                     
    }); 
});
$("#bocks").mouseleave(function(){
    if (mouseleavebusy == true) {
        return;
    }
    mouseleavebusy = true;
    $("#bocks2").fadeIn(function (){
       mouseleavebusy = false;                     
    });     
});

http://jsfiddle.net/x2qNZ/5/

暂时禁用JS交互？

3 个答案: