2

自動スライダーアニメーションのサポートが必要です。つまり、私の質問は、ホバーイベントでアニメーションを停止する方法ですが、別の要素のアニメーションが完全に終了したときにすぐに停止する方法ではありません。

私はこのコードを持っています：

$(function(){

   var current_slide=1;
   var set_time=2500;

   $('span').css({top:'300px'});

   $.timer(6000,function(timer){
      switch(current_slide){
         case 1:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-960px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=2;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 2:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-1920px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=3;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 3:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-2880px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=4;
             $('span').delay(2500).animate({top:'300px'});
            break;

         case 4:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'0px',top:'0px'},{easing:'easeOutExpo',duration:set_time});
            current_slide=1;
            $('span').delay(2500).animate({top:'300px'});
            break;
      }

      timer.reset(12000);
   });

   $("#slideshow").hover(function(){
      $(this).stop(true,true);
   });
});

問題は、スライダーにカーソルを合わせると、アニメーションがほとんど、突然、醜く停止した（最後までジャンプした）場合です。.stop（）の前にキューを使用する必要があるかもしれません。ここに良い例があります：http ： //www.sevtopolishotel.com/事前にTnx！

4

3 に答える 3

1

次のようにホバー状態を追跡できます。

var isHovered = false;
$("#slideshow").hover(function(e){
    isHovered = e.type == 'mouseenter';
});

そこから、スイッチ全体をラップすることができます。if(!isHovered) { ... }つまり、スライドショーがホバーされている限り、タイマーはすぐにスキップして次のタイムアウトを設定します。

于 2012-04-18T14:18:34.193 に答える
0

.stop（）のドキュメントは次のとおりです：http：//api.jquery.com/stop/

「jumpToEnd」の引数を渡すことができると書かれています。その引数がfalseの場合、アニメーションは終了するまで続行されます。コードは次のようになります。

$("#slideshow").hover(function(){
          $(this).stop(true,false);
    });  });
于 2012-04-18T14:03:50.900 に答える
0

タイマーへの参照を保持できます。次に、アニメーションを停止するのではなく、アニメーションをスケジュールしているタイマーをクリアするだけです。そのため、現在のアニメーションは実行されますが、再度実行される予定はありません。javascript setTimeoutを使用している場合は、これを行うことができます

vat timer=setTimeout(animation_function, delay);
 //to stop later
clearTimeOut(timer);

しかし、jqueryタイマープラグインを使用していると思います。それでも、$。timerプラグインには、再度実行を停止するための明確なメソッドが必要です。ドキュメントを確認してください。

この投稿を見るのはほとんど同じ問題です。

于 2012-04-18T14:07:26.147 に答える