jQuery animiert springt weiter

Question

Ich habe eine Liste von Text, den ich versuche, über den oberen Bildschirmrand zu scrollen. Ich benutze jQuery .animate(), um dies zu tun. Aber es bleibt nur kurz am Ende und zeigt mir nicht die meisten Animationen.

Idealerweise wird am Ende nur die Scrollschleife durchlaufen.

$('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

Ich denke, das ist das, was Sie suchen? 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"); 
    }); 
}); 

Edit: kleine Erklärung:

Du hast deine Animationen gestartet, indem du das Tekst nach rechts gedrückt hast (deshalb ist es plötzlich in die Box gesprungen), der Teil, in dem die Animation nicht beendet wurde, ist, weil du es nicht aus dem Bildschirm heraus animiert hast der Weg (wenn ein Element 2000 Pixel breit ist und Ihre Animation 1000 Pixel nach links ist, bleiben 1000 Pixel auf dem Bildschirm).