javascript - 如何为此选取框 jquery 添加停止和启动功能

Question

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

已经做了一个例子。

基本上，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))});
    }

和 html 标记

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

所以它只会不断向上移动，现在我想让它在鼠标进入时停止并在鼠标离开时开始

我做了和 mouseenter 事件来阻止它

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

它工作正常，但现在我坚持如何让它再次移动 onmouseleave 。

请帮忙。谢谢！！！

Answer 1

试试这个小提琴：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))
    });
}