1

ユーザーが自分のWebサイトで200ピクセル下にスクロールした後、固定画像を水平方向にスライドさせようとしています。コードは次のようになります。

//CSS
div#slideimage
{
   position: fixed;
   left: -20%;
   width: 500%;
}


// JQUERY
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
   $('#slideimage').stop().animate({left: "100px"});
} else {
     $('#slideimage').stop().animate({left: "-400px"});
}
});

問題は、スクロールがスムーズでなく、部分的に一時停止しているように見えることです。ユーザーがたとえば垂直方向に200ピクセル下にスクロールした後、画像を水平方向にスムーズにスライドさせる方法を教えてもらえますか。

ヘルプをいただければ幸いです:)

4

2 に答える 2

1

これは、ユーザーがスクロールすると、jQueryがアニメーションキューをブラウザにスタックするためです。ブラウザが邪魔になる複数のアニメーション操作でフラッシュされるため、アニメーションのスムーズさが低下します。あなたがする必要があるのは、アニメーションを行うために数ミリ秒待つことです

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
 setTimeout(function() {
   $('#slideimage').stop().animate({left: "100px"});
 }, 150);
} else {
   setTimeout(function() {
     $('#slideimage').stop().animate({left: "-400px"});
 }, 150);
}
});
于 2012-11-23T13:16:09.107 に答える
0

小さなカルーセルがあなたにとって最高の目的地かもしれません、私はそれを使用しました、そして私はそれから非常に良い結果を得ました。これがそのためのリンクです

http://baijs.nl/tinycarousel/

于 2012-11-23T13:24:31.243 に答える