jQuery函數淡出window.scroll事件不工作的圖像

Question

這應該是非常簡單的，但我不明白爲什麼它不工作。

如果滾動頂部位於特定區域內，則淡出圖像。如果使用鼠標滾動或使用鍵盤箭頭鍵，這將起作用。但是，當你使用鼠標拖動滾動條的功能被稱爲 - 我可以在日誌中看到這一點 - 但jQuery fadeTo不能立即工作。如果我停止滾動，大約5秒後圖像消失。

$(window).scroll(function(){ 
    var scrollYpos = $(document).scrollTop(); 

    if(scrollYpos > 100 && scrollYpos < 200){    
     fade_out_img(); 
    } 
    else{ 
     fade_in_img(); 
    } 
}); 

function fade_out_img(){ 
    $("#image").stop().fadeTo('slow', 0.1); 
} 
function fade_in_img(){ 
    $("#image").fadeTo('slow', 1.0); 
} 

在此先感謝您的幫助。

Answer 1

Working jsFiddle Demo

你錯過了你的fade_in_img功能stop()方法。

HTML

<div id="image"></div> 
<div id="scroll"></div> 

CSS

#image { 
    width: 200px; 
    height: 1000px; 
    background: red; 
} 

#scroll { 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 100px; 
    height: 300px; 
    overflow: auto; 
    background: yellow; 
} 

的JavaScript（的jQuery寫的）

$(function() { 
    $(window).scroll(function(){ 
     var scrollYpos = $(document).scrollTop(); 

     // for debugging 
     $('<div>').text(scrollYpos).prependTo('#scroll'); 

     if(scrollYpos > 100 && scrollYpos < 200){    
      fade_out_img(); 
     } 
     else{ 
      fade_in_img(); 
     } 
    }); 

    function fade_out_img(){ 
     $("#image").stop().fadeTo('slow', 0.1); 
    } 

    function fade_in_img(){ 
     $("#image").stop().fadeTo('slow', 1.0); 
    } 
}); 

不要忘記檢查jsFiddle demo。