如何添加這個字幕的停止和啓動功能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> 

所以它只汽車無向上移動，現在我想讓它停止在鼠標輸入，並開始對鼠標離開

我製作並用鼠標事件停止它

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

它工作正常，但現在我堅持如何使它再次移動onmouseleave。

請幫忙。 thankk！

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)) 
    }); 
}