jquery - jquery animation pause resume speed slowing down

Question

i'm trying to make a seamless marquee animation with jquery with pause/resume on mouse hover, but i can't solve the speed problem ..

i'm quite sure this is just a little something that i missed. here what i've got so far:

css

body{
    width:500px;
    border:1px solid #000;
    margin:0 auto;}
#marquee{
    overflow:hidden;
    width:100%;}
#marquee div{
    margin-left:-100%;
  width:200%;}
#marquee span{
    width:50%;
    display:inline-block;
    text-align:center;}  

js

$(function() {
  $("#marquee")
    .wrapInner("<span>")
    .append($(this).find("span").clone())
    .wrapInner("<div>")
    .mouseover(function(){
      stops();
    })
    .mouseout(function(){
      plays(parseInt($m.css('margin-left')));
    });
  $m = $('#marquee').find("div");
  var cd = parseInt($m.css("margin-left"));
  var sp = Math.abs(cd / 5000);
  var reset = function(s) {
    if(!s) $m.css("margin-left", "0%");
    s = s | 5000;
    $m.animate({ "margin-left": "-100%" }, s, 'linear', reset);
  };
  var plays = function(e) {
    var d = Math.abs(cd-e);
    var s = d / sp;
    $m.css("margin-left", e);
    reset(s);
  };
  var stops = function() {
    $m.clearQueue();
    $m.stop();
  };
  reset();
});

http://jsbin.com/ifUXuKi/1/

please don't offer me a plugin to solve this :)

Answer 1

尝试使用 || （逻辑或）而不是 | （按位或）。

s = s || 5000;