jquery - 左右滑动

Question

我正在使用 jquery 从左到右滑动包含缩略图的 div。下面的函数有效，但每次鼠标在箭头上滚动时它们只会移动 30px。有没有办法在鼠标悬停在箭头上的整个过程中每秒移动 30px，然后一旦移动鼠标，动画就会停止？

$(".left-arrow").mouseover(function(){
 $("#slides").animate({ 
    left: "-=30px",
  }, 1000 );
}); 

$(".right-arrow").mouseover(function(){
 $("#slides").animate({ 
    left: "+=30px",
  }, 1000 );
}); 

Answer 1

主要逻辑是使用animate()的回调函数在完成时重新启动动画：

$(".left-arrow").mouseover(function(){
  playanim("+=30px");
}).mouseleave(function(){
  stopanim();
}); 

$(".right-arrow").mouseover(function(){
  playanim("-=30px");
}).mouseleave(function(){
  stopanim();
}); 

function playanim(speed)
{
  // launch the anim with the desired side
  $("#slides").animate({ 
    left: speed,
  }, 1000,'linear',function(){playanim(speed);});
}

function stopanim()
{
  // stop the animation and clear the animation queue
  $("#slides").stop(true);
}

它应该工作:)

这是一个要检查的 Jiddle：JsFiddle

编辑：要为您的滑动添加约束，可以通过测试幻灯片的左侧位置来执行快速方法。查看此Jsfiddle以获取具有最小/最大约束的快速示例