2012-05-09 7 views
-2

を下にスクロールした後にスライドすると、ここで私はdiv要素は、すぐに私はピクセルの一定量を下にスクロールすると、中にスライドするようにしたい私のコード http://jsfiddle.net/mihaene/7bdkB/本部は

です。 非常に遅れています(5秒など)。 どうしたのですか?

どのような提案も非常に高く評価されます。

答えて

2

こんにちは、私は問題があなたのelseブロックだと思う役に立てば幸いqueue

DEMO

を使用。 jQueryは〜300ミリ秒かかるアニメーションを開始します。

var $test2 = $(".test2"); 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $test2.stop().animate({left: "200px"}, 300); 
    } else { 
     $test2.stop().animate({left: "-90px"}, 300); 
    } 
}); 

だから、それらのアニメーションを停止するにはjQueryのstop()メソッドを使用します。

sidenote:おそらく、if/elseステートメントを考えると、スクロールするたびにアニメーション(または停止/再開)が発生しないようにする必要があります。

+0

ありがとうございます。完璧に動作します! – Michael

+0

あなたは大歓迎です! –

+0

私はこのケースのif/else文を別のものと考えることはできませんが...それをそのように使うことはパフォーマンス上悪いと思いますか? – Michael

0

jsfiddleの例では遅延の問題はありませんが、これは、ウィンドウのサイズが小さく、スクロールする機会があまりないためです。遅延の原因として、スクロール機能の発生頻度があります。彼らはすぐに積み重ねられ、遅延を引き起こす可能性があります。

console.log(Firebugを使用している場合)を追加し、コンソールの周波数を確認して頻度をよく理解してください。

+0

私はこれを試して、非常に速く発射します。にもかかわらず、アニメーションは非常に遅れて始まります: $(document).scroll(function(){ console.log($(document).scrollTop()); }) – Michael

+0

見ても反応は速いですか? – Michael

1

これは私が考えることができる最高の解決策です、私が間違っている場合は私を修正してください。

イベントは積み重なり、次々と発生します。だから私の解決策は、キューにそれらを保持し、必要に応じてキューをクリアすることです。

私は、これは

+0

私はタイマーに関数を置くことを好み、短時間の間スクロールが止まったら起動します。 250msのように。 –

+0

クール。ありがとう。かなり良い作品。私はキューイングでそれを完全に得ていませんが、素敵です! – Michael