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"); 
    }); 
}); 

編集： 説明小さな：

あなたは右にtekstを押すことでアニメーションを開始しました（そのため、突然突然ボックスに飛び込んでしまいました）。アニメーションを終了しなかった部分は、画面からアニメーション化しなかったためです（要素の幅が2000ピクセルで、アニメーションが左に1000ピクセルの場合、1000ピクセルが画面に残ります）。