Question

编辑： 好，我知道了。真的很抱歉，感谢Anthony，Rakesh和Nidhin :)问题是因为我在toTheLeft函数中的“+”符号：

$（“#inner”）。animate（{'left'：' + '+ 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个视频（或更多）。

先谢谢。这让我发疯了。

Answer 1

您可以尝试使用stop()停止正在播放的动画。

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

Answer 2

因为你的左边值没有改变.. 检查这个小提琴的控制台.. 你的左边价值保持不变..

 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

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

2 个答案: