1

この質問は簡単に思えますが、フェード効果を適切に機能させることができないようです。フィドルを表示してコードを確認してください。上にスクロールしたときにのみ画像がフェードインし、下にスクロールしてもフェードアウトしないことがわかります。なぜこれが起こるのですか？私が書いたコードを完全には理解していないと思います。助けていただければ幸いです。

ここにjQueryコードがあります

var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
     divs.stop(true, true).fadeIn(5000);
} else {
     divs.stop(true, true).fadeOut(5000);
 }
});

前もって感謝します！

http://jsfiddle.net/a4FM9/809/

4

2 に答える 2

0

非常に簡単に削除でき.stop(true, true)、両方向にフェードします。

実施例

var divs = $('.banner');
$(window).scroll(function(){
   if($(window).scrollTop()<=10){
         divs.fadeIn(5000);
   } else {
         divs.fadeOut(5000);
   }
});

スクロールが停止した後にフェードを発生させたい場合は、次のようなタイムアウト関数を使用できます。

実施例2

$(window).scroll(function () {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        var divs = $('.banner');
        if ($(window).scrollTop() <= 200) {
            divs.fadeIn(5000);
        } else {
            divs.fadeOut(5000);
        }
    }, 1000)); //timeout set to 1 second
});

このタイムアウト関数の詳細については、yckart のタイムアウト関数を参照してください。

于 2013-07-29T15:45:27.863 に答える