Question

我在我的网站上构建了一个小jquery滑动div，当你将鼠标悬停在标签上时，div从右侧滑入，并且在鼠标离开事件中，div滑回视图之外。但问题是，如果你非常快速地将鼠标移动到标签然后关闭，然后结束并继续重复这个div反复滑入和滑出;无论如何我可以阻止这个吗？

由于

$('.pillars-wrapper').mouseenter(function() {
$('.handle').fadeOut();
    $('.tab-wrapper').animate({
    right: '+=175'
})
});

$('.pillars-wrapper').mouseleave(function() {
$('.tab-wrapper').animate({    
    right: '-=175'
});
$('.handle').fadeIn()
});

这是一个小提琴...

http://jsfiddle.net/FXAcP/

Answer 1

以下是我如何解决此问题的示例：

$("#menu-balticpoint li").mouseover(function() {

                var id = $(this).attr('id');
                var width = $("#"+id+" a").width();
                $("#"+id+" ul li a").css("width", width+"px");
                $("#"+id+" ul").slideDown('fast').show();
        $(this).hover(function() {
        }, function(){
            $("#"+id+" ul").fadeOut('slow').hide().stop(true, true); //When the mouse hovers out of the subnav, move it back up
        });
        });

Answer 2

尝试添加.clearQueue（）。

例如，而不是

$('.tab-wrapper').animate({

做

 $('.tab-wrapper').clearQueue().animate({

您可以阅读更多相关信息here

Answer 3

您可以提供适当移动动画的时间。

例如，要降低滑动速度，请在动画中使用“慢”参数。

$('.tab-wrapper').animate({
      right: '-=175'
  },'slow');

您可能需要在此处阅读有关jquery的animation docs。

Answer 4

演示 http://jsfiddle.net/wVMu6/11/

对不起男人，对于你的旧帖子 - 我回复了2分钟，但意识到它被删除了，

另请注意，您已将.tab-wrapper作为主要容器，我想我会提及您是否会收到一些随机的CSS问题。

希望这会有所帮助，欢呼！乙 - ）

<强>码

 $('.pillars-wrapper').mouseenter(function() {
     $('.handle').fadeOut().stop();
    $('.tab-wrapper').animate({
        right: '+=175px'
    }, "slow").stop(true,true);

}).mouseleave(function() {

    $('.tab-wrapper').animate({
        right: '-=175px'
    }, "slow").stop(true,true);
    $('.handle').fadeIn().stop();

});

关于jQuery的滑动标签

4 个答案: