javascriptjqueryhtmlcssmarquee

Hover Over to Pause Marquee

I want to create a Marquee that scrolls some news articles but when the user hovers over it I need it to pause and when the user hovers out of it (onMouseOut) I need it to start back up. This did not work:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()">Text</marquee>

Does anyone have any suggestions on how I can achieve this in a minimal amount of code?

Solution

  • The marquee tag has an attribute called scrollamount which controls how fast it goes. All we need to do is set the value to 0 when we hover in and set it back to 5 when we mouse out.

    DEMO: http://jsfiddle.net/U9yFj/

    $(function() {
    $('marquee').mouseover(function() {
        $(this).attr('scrollamount',0);
    }).mouseout(function() {
         $(this).attr('scrollamount',5);
    });
});