画像遷移を伴うフェードアウト

Question

私が450pxをスクロールダウンすると、画像がフェードインしますが、もう一度スクロールすると、移行しなくなりました。私は推移とそのちょうど何かを推測する。ここであなたは私が何を意味するか見ることができるようにコードおよびGIFです：あなたが効果をフェード "逆" が必要な場合

https://gyazo.com/b27b6ba31e29a16f8cd0b862ffbfc1a0

INDEX

<div class="logo_aftereffects"></div> 
<div class="logo_premierepro"></div> 

     <script> 
       $(window).scroll(function() { 
       if($(window).scrollTop() >= 200) { 
        $('div#myTopnav').addClass('scrolled'); 
        $('a').addClass('scrolled2'); 
       if($(window).scrollTop() >= 430) { 
        $('div.sidebar').addClass('scrolled3'); 
        $('div.logo_premierepro').addClass('scrolled4'); 
        $('div.logo_aftereffects').addClass('scrolled5'); 
        } else { 
        $('div.sidebar').removeClass('scrolled3'); 
        $('div.logo_premierepro').removeClass('scrolled4'); 
        $('div.logo_aftereffects').removeClass('scrolled5'); 
        } 
        } else { 
        $('div#myTopnav ').removeClass('scrolled'); 
        $('a').removeClass('scrolled2'); 

        } 
       }); 
       function myFunction() { 
        $("#myTopnav").toggleClass('responsive'); 
        $("div.sidebar").toggleClass('responsive'); 

       } 
     </script> 

CSS

.logo_aftereffects { 
     background: url('/images/aftereffects_icon.png'); 
     width: 64px; 
     min-height: 64px; 
     background-size: cover; 
     margin-top: 50px; 
     float: left; 
     opacity: 0; 

    } 

    .logo_premierepro { 
     background: url('/images/premierepro_icon.png'); 
     width: 68px; 
     min-height: 68px; 
     background-size: cover; 
     margin-top: 49px; 
     float: right; 
     opacity: 0; 
    } 

    .scrolled { 
     min-height: 10px; 
     color: inherit; 
     background: black; 
     transition: 0.35s all ease-in-out; 
     opacity: 0.7; 
    } 

    .scrolled2 { 
     color: white; 
     opacity: 1; 
    } 

    .scrolled3 { 
     transition: .85s all ease-in-out; 
     background: #d2a679; 
     opacity: 0.8; 
    } 

    .scrolled4 { 
     opacity: 1; 
     transition: 1s all ease-out; 
     float: right; 
     margin-right: 38%; 
    } 

    .scrolled5 { 
     opacity: 1; 
     transition: 1s all ease-out; 
     float: left; 
     margin-left: 38%; 
    } 

Answer 1

は、元の要素（.logo_aftereffects & .logo_premierepro）にtransitionプロパティを明示的に指定する必要があります。

.logo_aftereffects { 
     background: url('..'); 
     width: 64px; 
     min-height: 64px; 
     background-size: cover; 
     margin-top: 50px; 
     float: left; 
     opacity: 0; 
     transition: 1s all ease-out; //added 
    } 

    .logo_premierepro { 
     background: url('..'); 
     width: 68px; 
     min-height: 68px; 
     background-size: cover; 
     margin-top: 49px; 
     float: right; 
     opacity: 0; 
     transition: 1s all ease-out; //added 
    }