jQuery的动画不断跳跃

Question

我有一个文本列表，我试图滚动屏幕的顶部。 我正在使用jQuery .animate（）来做到这一点。 但是它只是在最后跳跃，并没有显示我大部分的动画。

理想情况下，它最终会保持循环滚动。

$('document').ready(function() { 
 
    $('#scroller').click(function() { 
 
    $('#scroller *').animate({ 
 
     right: "0" 
 
    }, 1, "linear"); 
 
    $('#scroller *').animate({ 
 
     left: "0" 
 
    }, 1000, "linear"); 
 
    }); 
 
});

* { 
 
    font-family: Helvetica; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#scroller { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 5%; 
 
    background-color: black; 
 
    color: white; 
 
    white-space: nowrap; 
 
} 
 
#scroller * { 
 
    position: relative; 
 
    font-size: 2em; 
 
    text-decoration: none; 
 
    display: inline; 
 
    left: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="scroller"> 
 
    <li>This is the first list item with text</li> 
 
    <li>&nbsp;-&nbsp;</li> 
 
    <li>This is list item number 2</li> 
 
    <li>&nbsp;-&nbsp;</li> 
 
    <li>List item 3</li> 
 
    <li>&nbsp;-&nbsp;</li> 
 
</ul>

Answer 1

我认为这是你在找什么？ https://jsfiddle.net/hysgvjnk/5/

HTML：

<ul id="scroller"> 
    <li>This is the first list item with text</li> 
    <li>&nbsp;-&nbsp;</li> 
    <li>This is list item number 2</li> 
    <li>&nbsp;-&nbsp;</li> 
    <li>List item 3</li> 
    <li>&nbsp;-&nbsp;</li> 
</ul> 

CSS：

* { 
    font-family: Helvetica; 
    padding: 0; 
    margin: 0; 
} 
#scroller { 
    position: relative; 
    width: 100%; 
    height: 5%; 
    background-color: black; 
    color: white; 
    white-space: nowrap; 
    overflow: hidden; 
} 
#scroller * { 
    position: relative; 
    font-size: 2em; 
    text-decoration: none; 
    display: inline; 
    left: 100%; 
} 

JS/JQUERY：

$('document').ready(function() { 
    $('#scroller').click(function() { 
    $('#scroller *').animate({ 
     left: "1200" 
    }, 1, "linear"); 
    $('#scroller *').animate({ 
     left: "-1200" 
    }, 4000, "linear"); 
    }); 
}); 

编辑： 小说明：

你开始将动画推到右边（这就是为什么它突然跳入盒子的原因），它没有完成动画的部分是因为你没有将它的动画全部移出屏幕（如果一个元素的宽度是2000像素，而您的动画是左边的1000像素，那么屏幕上仍然会保留1000像素）。