jquery - 左右滑动

我正在使用jquery从左向右滑动包含缩略图的div。下面的功能起作用了，但是每次鼠标滑过箭头时它们只会移动30px。有没有办法在整个鼠标悬停在箭头上方时每秒移动30像素，然后一旦移动鼠标，动画就会停止？

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

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

最佳答案

主要逻辑是在完成时使用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);
}

它应该工作:)

这是一个检查的谜语：JsFiddle

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

关于jquery - 左右滑动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19919294/