如何使用jQuery將圖像淡入和淡出？

這個問題看起來很簡單，但我似乎無法使淡入淡出效果正常工作，請查看小提琴以查看代碼，您會注意到圖像只在您向後滾動時淡入，並且在滾動時不會淡出爲什麼會發生這種情況？我不認爲我完全理解我寫的代碼，我會感謝一些幫助。如何使用jQuery將圖像淡入和淡出？

這裏是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/

來源

2013-07-29 cdm89

'var divs = $（'。banner'）;'真的應該在事件函數中，以便它總是獲取當前元素，否則它將是靜態的，並且只會獲取當前元素代碼已執行。 –

@PatrickEvans你不能說*應該在事件函數*中。在給定的例子中做他所做的事情是非常正確的。沒有看到其他的代碼，你不能說另有說明。 – Archer

Demo

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

來源

2013-07-29 15:35:23

OP也要求圖像在向下滾動時淡出。 –

@RoryMcCrossan謝謝你也加了.. !! –

很簡單，你可以只取出.stop(true, true)和它消失在兩個方向：

Working Example

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

如果你想有淡入淡出發生後的滾動已經停止，你可以使用一個超時功能，像這樣：在這個超時yckart's timeout function更多信息：

Working Example 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 
});

見功能。

來源

2013-07-29 15:45:27 apaul

如何使用jQuery將圖像淡入和淡出？

回答

相關問題