jquery淡入淡出效果，同時滾動和更改src

Question

我試圖改變我的標誌，而向下滾動，這個想法是，他們之間切換2個圖像。首先我想這個解決方案：

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 200) { 

     $('#logo').attr('src','/logo.png'); 
    } else { 
     $('#logo').attr('src','/logo2.png'); 
    } 
}); 

這個工作，但兩個圖像之間的橋樑是大的，所以我因子評分也許是不錯的淡出和淡入圖像。然後我帶着這樣的想法：

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 200) { 

     $("#logo").fadeOut(1000, function() { 
      $('#logo').attr('src','/logo.png'); 
     }).fadeIn(1000); 


    } else { 

     $("#logo").fadeOut(1000, function() { 
      $('#logo').attr('src','/logo2.png'); 
     }).fadeIn(1000); 
    }; 

}); 

這適用於50％，當我向下滾動圖像淡出，但新一進來就像BAM，不褪色添加所有，當我滾動備份，第一個圖像將不再顯示...

有人可以幫助我這個請????

MVG，

Answer 1

試試這個短代碼，

$(window).scroll(function(){ 
    var win=this; 
    $("#logo").stop(true,true).fadeOut(1000, function() { 
     this.src = $(win).scrollTop() > 200 ? '/logo.png' : '/logo2.png'; 
    }).fadeIn(1000); 
}); 

更新與片段，

var logo1='http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images.jpg', 
 
logo2='http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg'; 
 
$(window).scroll(function(){ 
 
    $("#logo").fadeOut(1000, function() { 
 
     $(this).attr('src',$(window).scrollTop() > 200 ? logo2 : logo1).fadeIn(1000) 
 
    }); 
 
});

body{height:1000px} 
 
img{width:150px;position:fixed;top:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img id="logo" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images.jpg" />