Text Diashow mit Effekt

Question

Ich habe ein Problem mit Text-Diashow. Ich möchte es auf die linke Seite des div verschieben und den neuen Text von der rechten Seite gleiten lassen. Ich habe einige Beispiele ausprobiert, die ich hier gefunden habe, aber nichts hat funktioniert, außer einem, das das Aussehen der Seite grundlegend zerstört hat. Das ist mein Setup:

<div> 
    <p id="textslide"></p> 
</div> 

var quotes = [ "Q1", "Q2", "Q3", "Q4" ]; 
var i = 0; 
setInterval(function() { 
    $("#textslide").html(quotes[i]); 
    if (i == quotes.length) { 
     i = 0; 
    } else { 
     i++; 
    } 
}, 10 * 700); 

Alle Ideen, wie die Folie wirksam werden zu lassen?

Answer 1

Der einfachste Weg, dies zu tun wäre eine Marquee

<marquee class='marquee'></marquee> 

verwenden können Sie dann die Javascript wie folgt schreiben.

var quotes = ["Q1", "Q2", "Q3", "Q4"]; 
$.each(quotes, function(i, j) { 
    $("marquee.marquee").append('<span>'+j+'</span>') 
}) 

Sie können sogar einzelne Elemente geben (span in diesem Fall) Stil

.marquee span{ 
    margin:10px; 
}