Javascript 使用jquery可以平滑地显示div

我的div应该会在一段时间后平滑显示，我认为它需要一个转换脚本代码，这是我的脚本，显示向下滚动800像素后的div

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

---

我不知道如何在这段代码中添加转换，很抱歉，我根本不懂javascript

为了获得更好的体验，请使用CSS转换而不是jQuery动画。方法是使用滚动功能从菜单元素中添加/删除类，然后使用css创建淡入效果

例如：

CSS

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

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

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

JS

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

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

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

---

使用此

$（'.menu'）.fadeIn（1000）我应该把它放在哪里？我打开了一个新的脚本标签，但它不起作用检查这个，它工作得很好，但它产生了一个新问题，我的菜单不再起作用（我的意思是它不打开菜单内容）