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