jquery - 如果 left <= 0 则停止动画

Question

我有几个函数可以左右滑动 div。它工作得很好，除了我需要它在用户到达 div 末尾时停止这一事实。 IE:左箭头的移动不应超过 left: 0;。如有任何帮助，我们将不胜感激!

$(".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);
}

Answer 1

您可以使用 position 检查左侧位置或 Offset .

使用position的解决方案:

function playanim(speed) {

  var position = $("#slides").position();

  //if position (or offset, if you like) is more than 0, we may move.
  if ( position.left > 0 ) {
     // make sure you don't accidentally go more left than 0
     if( position.left < 30) {
        speed = 30 - position.left;
     }
     // launch the animation with the desired side
     $("#slides").animate({ 
        left: speed,
     }, 1000,'linear',function(){playanim(speed);});
   }
}