views:

220

answers:

1

Hey guys,
I found code posted by a user on here for a seamless jQuery marquee/ticker. I've modified it to start and stop when scrolled over/scrolled out of, but it often lags once the user scrolls out. It never completely stops, but the speed at which the ticker scrolls is sometimes 1/10 of its original speed. I've sped it up so it's easier to see this lagging. Anyway, if someone has any idea of how to fix this, I would greatly appreciate it.

jQuery

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

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

   marquee.wrapInner("<div class='scrolling'>");
  marquee.find("div").css("width", "200%");

  var reset = function() {
       $(this).css({"margin-left":"0%"});
       $(this).animate({ "margin-left": "-100%" }, 500, 'linear', reset);
  };

  reset.call(marquee.find("div"));

  marquee.find("div").bind({
mouseenter: function () {
 $(this).stop();
 if($(this).css("margin-left") == "-"+$("#scroller").width() + "px") $(this).css("margin-left", "0%");
},
mouseleave: function() {
 $(this).stop().animate({ "margin-left": "-100%" }, 500, 'linear', reset);
}
});
});

HTML

<div id="scroller">
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
 </div>

Thanks,

Greg

A: 

It seems the answer lies in the way JQuery manages memory in the .clone() and .remove() calls. There's a very good discussion at:

http://stackoverflow.com/questions/1462649/jquery-memory-leak-with-dom-removal/

Further details and a workaround are available at:

http://forum.jquery.com/topic/severe-memory-leak-with-clone

Good luck!

Simon Young
Thanks for the reply, actually. I found the problem a few days after posting. Basically, "animate" was recalled at the same speed whenever it stopped. So if it had 5000px to scroll or 5px to scroll it would do it in 500ms. I rewrote the code to factor a new speed depending on where the scroller was stopped. It works flawlessly now :).