Senza soluzione di continuità jQuery Marquee?

Question

E 'possibile creare un tendone senza soluzione di continuità al 100% in jQuery (o semplicemente javascript jQuery ma preferito)?

Ho fatto un semplice tendone che si muove a sinistra fino a quando è fuori dallo schermo allora semplicemente salta (quando fuori di vista) a destra e riparte. Comunque mi piacerebbe che per non avere l'attesa.

L'unico modo che ho potuto pensare di fare questo sarebbe quello di duplicare il testo e metterlo dopo il primo testo, poi scambiarle rotonda di nuovo. Tuttavia non ho idea di come implementare questo in jQuery, ho cercato in .clone() di jQuery, ma non riesco a farlo funzionare correttamente, tutto salta.

Tutte le idee?

Grazie per il vostro tempo,

Answer 1

Dato il seguente markup:

<div id="marquee">My Text</div>

Per la duplicazione, mi piacerebbe fare qualcosa di simile:

$("#marquee").wrapInner("span"); // wrap "My Text" with a new span
$("#marquee").append($("#marquee span").clone().hide()); // now there are two spans with "My Text"

Spostamento e scambiando le campate è abbastanza facile. Ecco un esempio perfettamente funzionante:

$(function() {

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"});

    // wrap "My Text" with a span (old versions of IE don't like divs inline-block)
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

    // create an inner div twice as wide as the view port for animating the scroll
    marquee.wrapInner("<div>");
    marquee.find("div").css("width", "200%");

    // create a function which animates the div
    // $.animate takes a callback for when the animation completes
    var reset = function() {
        $(this).css("margin-left", "0%");
        $(this).animate({ "margin-left": "-100%" }, 3000, 'linear', reset);
    };

    // kick it off
    reset.call(marquee.find("div"));

});

vederlo in azione .

Avviso:

Non consiglio questo per qualsiasi sito web professionale. Tuttavia, potrebbe essere utile se si sta cercando di riprodurre un look retrò del 1990.