divはスムーズにjqueryを使用して表示されます

Question

しばらくするとスムーズに表示されるはずですが、これはトランジションスクリプトコードが必要だと思います。

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

私は申し訳ありません、私はより良い経験の使用CSSトランジションではなくjQueryのアニメーションのために、すべての

Answer 1

ではJavaScriptを知らない、このコードで移行を置く方法がわかりません。スクロール機能を使用して、メニュー要素からクラスを追加/削除し、cssを使用してフェードイン効果を作成する方法があります。例えば

：

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); 
    } 
});