매끄러운 jQuery 움직이는 문자?

Question

jQuery에서 100 % 완벽한 선택 윤곽을 만들 수 있습니까 (아니면 자바 스크립트가 좋지만 jQuery를 선호합니까?).

화면에서 벗어날 때까지 왼쪽으로 움직이는 간단한 선택 윤곽을 만들었습니다 (오른쪽에서 보이지 않는 경우). 다시 오른쪽으로 이동하여 다시 시작합니다. 그러나 나는 그것을 기다리지 않는 것이 좋을 것이다.

나는이 일을 생각할 수있는 유일한 방법은 텍스트를 복제하고 첫 번째 텍스트 뒤에 놓은 다음 다시 돌려 놓는 것입니다. 그러나 jQuery에서 이것을 구현하는 방법을 모르겠다. jQuery의 .clone()을 살펴 보았지만 제대로 작동하지 않을 수있다. 모든 것이 점프된다.

아이디어가 있으십니까? 다음과 같은 마크 업을 감안할 때 시간에 대한

감사합니다,

Answer 1

: 이동

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

및 스팬을 교환하는 것은 : 중복에 대한

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

, 나는 이런 식으로 뭔가를 할 거라고 꽤 쉽습니다. 다음은 완전한 기능의 예입니다.

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

면책 조항 :

나는 어떤 전문 웹 사이트에 대한이 사용하지 않는 것이 좋습니다. 그러나 역 1990의 모습을 재현하려는 경우 유용 할 수 있습니다.