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像素）。