不能運行兩個不同的動畫功能

編輯： 好吧，我明白了。真的很抱歉。感謝安東尼，Rakesh和Nidhin :)這個問題是因爲我在toTheLeft函數符號「+」的：不能運行兩個不同的動畫功能

$（「#inner」）.animate（{ '左'：'+ '+ newLeft +'px'}，'fast'）;

-----------------------------------^

我正在處理系統可以連續播放視頻（如播放列表），我希望用戶能夠右鍵/左鍵顯示播放列表中的隱藏視頻。很喜歡vimeo.com

問題是，我有兩個「動畫函數」，如果我點擊超過2或3次右箭頭，我不能點擊左箭頭了。我的意思是，它沒有任何動畫。

這裏是我的JS代碼：

function toTheLeft(){ 
     var posLeft = $("#inner").position().left; 
     var liWidth = $(".list").outerWidth(true); 
     var nLeft = (liWidth+posLeft); 
     if(nLeft > '0') { 
      var newLeft = '0'; 
     } else { 
      var newLeft = nLeft; 
     } 
     $("#inner").animate({'left': '+'+ newLeft +'px'}, 'fast'); 
    } 

    function toTheRight(){ 
     var posLeft = $("#inner").position().left; 
     var liWidth = $(".list").outerWidth(true); 
     var inWidth = $("#inner").outerWidth(true); // get width; 
     var posRight = (inWidth + posLeft); // add the two together 

     var vWidth = $("#videos").outerWidth(true); 
     var newLeft = (liWidth-posLeft); 

     if(posRight > vWidth) { 
      $("#inner").animate({'left': '-'+ newLeft +'px'}, 'fast'); 
     } 

    } 
$("#left").on("click", toTheLeft); 

$("#right").on("click", toTheRight);

的HTML代碼只有兩個div #right和#left。一切工作，直到我點擊2或3次。 div #videos顯示5個視頻，#inner包含10個視頻（或更多）。

謝謝，提前。這真讓我抓狂。

來源

2014-02-10 hellodracon

你已經定義了「var newLeft」三次。沒必要。只需在條件之外定義「var newLeft」，然後嘗試 –

newLeft依賴於posLeft，每次單擊箭頭時都會發生變化。所以我必須在每次函數運行時定義它。 – hellodracon

這很好......所以你可以在全局中定義newLeft，並在不同的函數中使用newLeft的不同值。 –

您可以嘗試使用stop()停止正在運行的動畫。

$("#inner").stop().animate({'left': '+'+ newLeft +'px'}, 'fast');

來源

2014-02-10 10:52:46

謝謝，但它不起作用:(。我驗證了，如果我點擊兩次同一箭頭，它會阻止，但如果我點擊右箭頭，然後左箭頭，它沒有任何問題，我真的 – hellodracon

也許多一點HTML代碼會有幫助。你確定你沒有雙ID嗎？ –

明白了！我編輯了我的問題。非常感謝！ – hellodracon

它，因爲你的左邊值不會改變.. 檢查這個小提琴的控制檯.. 你的左值保持不變..

var posLeft = $("#inner").position().left; 
    var liWidth = $(".list").outerWidth(true); 
    var inWidth = $("#inner").outerWidth(true); // get width; 
    var posRight = (inWidth + posLeft); // add the two together 

    var vWidth = $("#videos").outerWidth(true); 
    var newLeft = (liWidth-posLeft);

沒有價值變動在此

檢查此jsfiddle與您的控制檯打開 JSFIDDLE

來源

2014-02-10 11:23:09

知道了！編輯我的問題。非常感謝！ – hellodracon

不能運行兩個不同的動畫功能

回答

相關問題