div erscheinen reibungslos mit jquery

Question

mein div sollte nach einer Weile reibungslos erscheinen, ich denke, es braucht einen Übergang Skriptcode, das ist mein Skript, das das div nach 800 Pixel nach unten scrollen zeigt.

  $(document).scroll(function() { 
      var y = $(this).scrollTop(); 
      if (y > 700) { 
      $('.menu').fadeIn(); 
      } else { 
      $('.menu').fadeOut(); 
      } 
      }); 

Ich weiß nicht, wie in diesem Code setzen Übergang, sorry ich weiß Javascript nicht bei allen

Answer 1

Für eine bessere Übergänge Verwendung CSS Erfahrung und nicht jQuery Animationen. Der Weg, dies zu tun ist, Ihre Scroll-Funktion zu verwenden, um Klassen aus Ihrem Menüelement hinzuzufügen/zu entfernen und dann css zu verwenden, um den Einblendeffekt zu erzeugen.

Zum Beispiel:

CSS

.menu { 
    opacity: 0; 
    visibility: hidden; 
    transition: all .4s ease-out; 
    -webkit-transition: all .4s ease-out; 
} 

.menu.show { 
    opacity: 1; 
    visibility: visible; 
} 

JS

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 700) { 
     $('.menu').addClass("show"); 
    } else { 
     $('.menu').removeClass("show); 
    } 
});