スクロールしてsrcを変更するときのJqueryフェード効果

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

私はあなたが[ `.stopを（使用する必要があると思うのスニペットを更新

$(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" />