Marquage transparent jQuery?

Question

Est-il possible de créer un rectangle de sélection 100% transparent dans jQuery (ou juste javascript mais jQuery préféré)?

J'ai fait un simple rectangle qui se déplace vers la gauche jusqu'à ce qu'il soit hors de l'écran, puis saute simplement (lorsqu'il est hors de vue) vers la droite et recommence. Cependant j'aimerais beaucoup ne pas avoir l'attente.

La seule façon dont je pourrais penser à faire cela serait de dupliquer le texte et de le mettre après le premier texte, puis de les échanger à nouveau. Cependant je n'ai aucune idée de comment implémenter ceci dans jQuery, j'ai regardé .clone() de jQuery mais ne peux pas le faire fonctionner correctement, tout saute.

Des idées?

Merci pour votre temps,

Answer 1

le balisage suivant:

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

Pour la duplication, je ferais quelque chose comme ceci:

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

Déplacement et permutation des travées est plutôt facile. Voici un exemple entièrement fonctionnel:

$(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")); 

}); 

See it in action.

Avertissement:

Je ne recommande pas pour tout site web professionnel. Cependant, il pourrait être utile si vous essayez de reproduire un look rétro des années 1990.