0

jquery を使用して、サムネイルを含む div を左から右にスライドさせています。以下の関数は機能しますが、マウスが矢印の上を移動するたびに 30px しか移動しません。マウスが矢印の上にある間ずっと 1 秒あたり 30px 移動する方法はありますか?マウスを移動すると、アニメーションが停止しますか?

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

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

1 に答える 1

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を参照してください

于 2013-11-12T01:54:42.990 に答える