0

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

4

4 回答 4

0

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

$("#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
        });
        });
于 2012-06-18T10:20:11.140 回答
0

尝试添加 .clearQueue()。

例如，而不是

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

做

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

你可以在这里阅读更多关于它的信息

于 2012-06-18T10:21:09.523 回答
0

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

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

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

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

于 2012-06-18T10:22:32.500 回答
0

演示 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();

});​
于 2012-06-18T10:27:23.747 回答