一個div動畫快速點擊屏幕外

我有這樣的代碼：一個div動畫快速點擊屏幕外

$(document).ready(function(){ 

    $(".subscriptions").click(function(){ 

     if($(".pollSlider").css("margin-right") == "-200px"){ 
      $('.pollSlider').animate({"margin-right": '+=200'}); 
      }else{ 
      $('.pollSlider').animate({"margin-right": '-=200'}); 
      } 
     }); 

//other exceptions 

if($(".pollSlider").css("margin-right") > "200px"){ 
    $(".pollSlider").css({'margin-righ':'200px'}); 
    } 
if($(".pollSlider").css("margin-right") < "0px"){ 
    $(".pollSlider").css({'margin-righ':'0px'}); 
    } 
});

這是CSS：

.pollSlider{ 
    overflow: auto; 
    top:0px; 
    position:fixed; 
    height:100%; 
    background:red; 
    width:200px; 
    right:0px; 
    margin-right: -200px; 
    z-index:100; 
}

我有一個div，當用戶點擊一個按鈕在div幻燈片從左邊200px進入屏幕，當用戶再次點擊相同的按鈕時，div的右邊爲200px。這個系統工作的非常好，但問題是，如果用戶在div動畫向左或向右時繼續點擊，則div會在屏幕的右側彈出，當用戶再次點擊時不會再回來。所以我試圖添加//其他異常，但這些if語句不起作用。我該如何解決這個問題？

來源

2013-01-04 Max Pain

您是否在'.animate（）'之前嘗試過使用'.stop（）'？ – Jai

就像$（'。pollSlider'）。stop（）; ?? –

是的，它應該像'$（'。pollSlider'）。stop（）。animate（）' – Jai

我創建了一個Demo我試圖達到你想要產生的效果。正如評論中所述，jQuery .stop(…)用於在開始下一個動畫之前清空動畫隊列。

我還將相對單位（+=200和-=200）更改爲固定號碼（0和-width）。如果您假定動畫將在中途停止，並且您需要動畫返回，則需要使用固定數字，或者在每個新動畫之前進行動態計算。

來源

2013-01-04 08:33:32 thirdender

創造奇蹟:)謝謝。 –

我對這類問題的解決辦法是增加一個全局變量NAD它的用戶點擊後設置爲false，並設置回TRU當動畫完成：

var allowAnimate = true; 
$(document).ready(function(){ 

$(".subscriptions").click(function(){ 
    if(allowAnimate){ 
    if($(".pollSlider").css("margin-right") <= "-200px"){ 
     allowAnimate = false; 
     $('.pollSlider').animate({"margin-right": '+=200'}, function(){allowAnimate = true}); 
     }else if($(".pollSlider").css("margin-right") >= "200px")){ 
     $('.pollSlider').animate({"margin-right": '-=200'}, function(){allowAnimate = true}); 
     } 
    } 
    }); 

//other exceptions 
....

因此，如果用戶點擊一個按鈕檢查變量allowAnimate是否其true，我將它設置爲false，並且動畫將開始動畫回調函數I回到true。

來源

2013-01-04 08:12:51 bumerang

我只是試過你的代碼，我仍然有同樣的問題。 –

是的，因爲你沒有確保代碼:)。你還應該檢查：if（$（「。pollSlider」）.css（「margin-right」）> =「200px」）' – bumerang

我將編輯我的答案。 – bumerang

一個div動畫快速點擊屏幕外

回答

相關問題