image fondu avec transition

Question

lorsque je fais défiler vers le bas 450px l'image s'estompe comme voulu, mais quand je remonte à nouveau il est juste parti sans transition. Je suppose que c'est juste quelque chose avec la transition. voici le code et un gif afin que vous puissiez voir ce que je veux dire:

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

Si vous avez besoin effet de fondu "inverse", Vous devez également fournir explicitement la propriété transition sur vos éléments d'origine (.logo_aftereffects & .logo_premierepro).

.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 
    }