滑動標籤跳躍約jQuery

我在我的網站上建立了一個小jQuery滑動div，當你將鼠標懸停在標籤上，div從右側滑入，並在鼠標離開事件時，div滑出視圖。然而問題是，如果你很快將鼠標移動到標籤上，然後關閉，然後重複這個動作，div會反覆滑入和滑出;無論如何，我可以阻止這個嗎？滑動標籤跳躍約jQuery

感謝

$('.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/

來源

2012-06-18 Liam

所以，它應該只每個完整的動畫火一次？ –

是啊，所以如果你把鼠標放在上面，然後反覆離開，那麼它會一直開啓和關閉，我希望它能夠「理解」用戶的意圖，而不是保持動畫 – Liam

設置一個布爾值來表示動畫是目前正在進行中。 '如果（開始）返回;開始= true;'在使用回調完成動畫時再次設置爲false。 '開始'當然是窗口範圍內的變量，而不是函數 –

演示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-18 10:27:23

這似乎允許div在頁面上爬行@Tats_innit – Liam

@Liam這可能有助於：http://jsfiddle.net/wVMu6/11/ ;看看'slideToggle'的男人，這是你需要的:)簡單的切換，這不會失控，歡呼。 –

下面是一個例子，我是如何解決這個問題：

$("#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-18 10:20:11

嘗試添加.clearQueue（）。

例如，而不是

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

做

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

你可以閱讀更多關於它here

來源

2012-06-18 10:21:09 David

可以提供時間，使動畫的適當運動。

例如，要降低滑動速度，請在動畫中使用'slow'參數。

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

您可能需要在這裏閱讀jQuery的animation docs。

來源

2012-06-18 10:22:32

滑動標籤跳躍約jQuery

回答

相關問題