左右滑动答案

【问题标题】：Slide from side to side左右滑动
【发布时间】：2013-11-24 00:26:47
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery css jquery-animate mouseover

【解决方案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 以获取具有最小/最大约束的快速示例

【讨论】：

太棒了，完美运行！还有一个问题，我将如何限制 div 可以从左侧和右侧移动的距离？ IE: 左箭头不允许 #slides 移动超过 0;
您应该在 playanim() 中添加一个限制幻灯片位置的测试。我更新代码