How to add stop and start function for this marquee jquery

Question

http://jsfiddle.net/gkTWC/1256/

An example that has been made.

Basically , the javascript

$(document).ready(function() {
    var i = 0;
    $(".marqueeElement").each(function() {
          var $this = $(this);
          $this.css("top", i);
          i += 60;
          doScroll($this);
    });
});

    function doScroll($ele) {
        var top = parseInt($ele.css("top"));
        if(top < -50) {
            top = 180;
            $ele.css("top", top);
        }
        $ele.animate({ top: (parseInt(top)-60) },600,'linear', function() {doScroll($(this))});
    }

and html markup

<div id="mholder">
    <div class="marqueeElement">1st</div>
    <div class="marqueeElement">2nd</div>
    <div class="marqueeElement">3rd</div>
    <div class="marqueeElement">4th</div>
</div>

So it only moves up continously, now i want to make it stop on mouse enter and start on mouseleave

I made and mouseenter event to stop it

$(".marqueeElement").mouseover(function() {
            $('.marqueeElement').stop(true);
        })

It works fine, but now i stuck in how to make it move again onmouseleave .

Pls help. thankk!!!

Answer 1

Try this fiddle: http://jsfiddle.net/mareebsiddiqui/gkTWC/1259/

JS:

$(document).ready(function () {
    var i = 0;
    $(".marqueeElement").each(function () {
        var $this = $(this);
        $this.css("top", i);
        i += 60;
        doScroll($this);
    });

    $(".marqueeElement").hover(function () {
        $('.marqueeElement').stop(true);
    }, function () {
        $('.marqueeElement').animate({
            top: (parseInt(top) + 60)
        }, 600, 'linear', function () {
            doScroll($(this))
        });
    });
});

function doScroll($ele) {
    var top = parseInt($ele.css("top"));
    if (top < -50) {
        top = 180;
        $ele.css("top", top);
    }
    $ele.animate({
        top: (parseInt(top) - 60)
    }, 600, 'linear', function () {
        doScroll($(this))
    });
}