An enhanced Marquee tag in javascript. How can I make it smoother?
<p>I've read that the <code>&lt;marquee&gt;</code> tag is to return in html5... however, I need a solution which will work in IE6... so with that said, I've given myself the brief of re-implementing the Marquee tag, using standards compliant code, and enhancing it so that the text continously loops.</p>

<p>My knowledge of javascript is very basic, so I've used this as a means of self-study.</p>

<p>My first attempt used jQuery's animate function... it was super smooth, but caused CPU to spike and any other script on the page to run very slowly.</p>

<p>So I've based my second attempt on <code>http://jqueryfordesigners.com/fun-with-overflows/</code> however, I've had complaint's that my new implementation it's not smooth enough... </p>

<p><a href="http://darren.primarysite.net/marqueeTest/" rel="nofollow">http://darren.primarysite.net/marqueeTest/</a></p>

<p>I've spent a few weeks dipping in and out in my spare time, trying to refine it.. However, I'm stumped. Does anyone have any idea how I can make this smoother / faster etc? </p>

<p>I've put my code into pastebin - so its easily viewed.</p>

<p><a href="http://pastebin.ca/2048170" rel="nofollow">http://pastebin.ca/2048170</a></p>

<p>and in the head...</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#marQueeContainer').marQuee({gap: 5});  
$('#marQueeContainer1').marQuee(); 
});
&lt;/script&gt;
</code></pre>

<p>and the following in the body...</p>

<pre><code>&lt;div id="marQueeContainer"&gt;An Example with a 5px text gap...&lt;/div&gt;

&lt;div id="marQueeContainer1"&gt;An example with defaults...&lt;/div&gt;
</code></pre>

<p>Thanks,</p>

<p>Rob</p>
