div div顯示順利使用jquery

Question

我的div應該會在一段時間後順利出現，我認爲它需要一個轉換腳本代碼，這是我的腳本，它顯示了800像素向下滾動後的div。

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

我不知道如何把過渡在此代碼，對不起，我不知道在所有

Answer 1

爲了更好地體驗使用CSS轉換，而不是jQuery的動畫的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); 
    } 
});