Question

我正在尝试用鼠标悬停时暂停/恢复的jquery制作无缝选框动画，但我无法解决速度问题..

我很确定这只是我错过的一点点。在这里我到目前为止：

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/

请不要给我一个插件来解决这个问题：）

Answer 1

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

s = s || 5000;

jquery动画暂停恢复速度减慢

1 个答案: