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);
}

它应该工作：）

这是一个要检查的小提琴：JsFiddle

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

从一侧滑到另一侧

1 个答案: