滑动选项卡跳转关于jQuery

Sliding Tab jumping about jQuery

本文关键字：jQuery 选项      更新时间：2023-09-26

>我在我的网站上构建了一个小的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/

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

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

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

希望这有帮助，干杯！B-）

法典 

 $('.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();
});​

这是我如何解决这个问题的示例：

$("#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
        });
        });

尝试添加 .clearQueue（）。

例如，而不是 

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

做 

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

您可以在此处阅读更多相关信息

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

例如，要降低滑动速度，请在 animate 中使用"slow"参数。

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

您可能需要在此处阅读jquery上的动画文档。

相关文章：