不能运行两个不同的动画功能

编辑： 好吧，我明白了。真的很抱歉。感谢安东尼，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

不能运行两个不同的动画功能

回答

相关问题