1

http://spritely.net/のライブラリを使用してアニメーションを作成しようとしています。.onscroll() を使用してトリガーしていますが、スクロールイベントの発生を頻繁に停止するのに苦労しており、.onscroll() によって毎秒何度も開始するように呼び出されるため、アニメーションの速度が速すぎます

現在の時間に応じて変数を設定することで、初めてスクロールするときにスクロールイベントの発生を頻繁に停止できます

後続のスクロール イベントの遅延を維持できません。スクロールするたびに変数の効果が低下します。

スクロールイベントごとにスクロールがアニメーションを1回だけ開始するようにするにはどうすればよいですか? デモは こちら http://jsfiddle.net/fGmbe/109/

コードはこちら

var t, l = (new Date()).getTime(), scrolling = false;

$(window).scroll(function(){
var now = (new Date()).getTime();

if(now - l > 800 && !scrolling ){
     $('#bird').sprite({fps:6, no_of_frames: 16, rewind: true   });
    l = now;

}

clearTimeout(t);
t = setTimeout(function(){
    if (!scrolling)
       $('#bird').spStop()
}, 300);
 });


  var a, b = (new Date()).getTime(), scrolling = false;
  $(window).scroll(function() {
  var nw = (new Date()).getTime();
  if(nw - b > 800 && !scrolling ){
  $('#bird').spStart({fps:8, no_of_frames: 16, rewind: true })
  l = nw;
    }
   });

 var c, d = (new Date()).getTime(), scrolling = false;
 $(window).scroll(function() {
  var nx = (new Date()).getTime();
  if(nx - d > 800 && !scrolling ){
  $('#bird').spStart({fps:8, no_of_frames: 16, rewind: true })
  l = nx;
    }
   });
4

1 に答える 1

1

イベントのハンドラーを 1 回だけ起動するには、debounceそれ!

http://benalman.com/projects/jquery-throttle-debounce-plugin/

設定された期間内にイベントが再度発生すると、ハンドラーは遅延します。

編集：

目的の機能を実現する方法の簡単な例。に渡す 2 番目の引数に注意してください$.debounce。これは、イベント ハンドラーをイベントの開始時または終了時に実行するかどうかを定義するブール値です。

http://jsfiddle.net/nubwG/

$(function(){
    $(window).scroll($.debounce(500, true, startSomething));
    $(window).scroll($.debounce(500, false, stopSomething));

    function startSomething(){
        // start animating here
    }

    function stopSomething(){
        // stop animating here
    }
});
于 2013-10-16T16:49:34.797 に答える