JavaScript marquee pause on hover tweak

Question

I was looking for a simple JavaScript marquee for a web project of mine and found this one: http://jsfiddle.net/4mTMw/8/

The JavaScript looks like:

var marquee = $('div.marquee');
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});

I really like the simplicity of the marquee, but I can't figure out how to make the marquee pause on hover.

If anyone could help point me in the right direction I'd appreciate it!

Thanks, Josh

Answer 1

create a variable to set animation state.in my code var go.use jquery hover function selector.hover( over, out ). when hover set state variable value to true , when mouse out set it to false. in the animation code do animation only if go variable is true.

marquee.hover(
  function() {
    go = false;
  },
  function() {
    go = true;
  }
);

in animation code

mar.marquee = function() {
    if (go) {

demo

http://jsfiddle.net/4mTMw/1333/