Question

I have setup a jquery based marquee,

This works perfectly fine until I have attempted to add in pausing the marquee on hover.

On hover it pauses it fine,

But upon resuming there is a gap after the current marquee.

What would be causing this?

A working example is at: http://202.78.151.195/marquee.html

The javascript is at: http://202.78.151.195/jquery-marquee.js

The plugin uses another plugin,
Jquery pause: http://202.78.151.195/jquery.pause.js

---

Pause/resume code for animations

list.parent('div').hover(
  function(){
    list.stop();
    timer1.pause();
    timer2.pause();
  }, 
  function(){                    
    timer1.resume();
    timer2.resume();
    move(list,left);
  }
);

Answer 1

The reason the gap appears is that after each hover the marquee speeds up a little bit. So the hovered marquee runs ahead of the next marquee causing a gap.

I think you must be adding multiple animations / timers to the same marquee.

I’d look in the .pause() and .resume() methods. They are speeding the marquee hovered over up.

The longer you hover the faster it takes off.

---

Anyway, why are you using a compicated plugin when .stop() combined with your move() works:

Try this for your list.hover()

            list.hover(function(){
                lists.first.stop();
                lists.second.stop();
            }, function(){                    
                move(lists.first,left);
                move(lists.second,left);
            });

It works well, you just have to take care of the case where the tail end of the previous list is visible and you pause the list to the right….. but otherwise there’s no speeding up.