将js style.css代码切换为jQuery动画

Question

我编写了一个javascript函数，当用户通过添加css滚动时，它会缩小标题并移动某些元素。效果很好，但并非所有更改都是平滑的（即使原始CSS具有transition: all 0.4s ease-in-out）。所以现在我想使用jquery animate()或switchClass()，但是当我尝试将代码更改为jquery时，它不起作用。控制台中没有错误，只是滚动不起作用。

这是有效的javascript：

window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  var mqtab = window.matchMedia("(min-width:769px) and (max-width: 1023px)");
  var mqdesk = window.matchMedia("(min-width: 1024px)");
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    if (mqdesk.matches) {
      document.getElementById("homelink").style.cssText = "width: 15%; margin-left: 5%";
      document.getElementById("menuWrapper").style.cssText = "margin-top: 0; position: absolute; right: 5%; bottom: 0";
      document.getElementById("menu").style.cssText = "font-size: .9em; line-height: 1.52em; margin-top: 1px";
    }
  } else {
    document.getElementById("homelink").style.cssText = "width: 60%; margin: auto";
    document.getElementById("menuWrapper").style.cssText = "margin-top: 20px; position: relative";
    document.getElementById("menu").style.cssText = "font-size: 1em; line-height: 1.65em; margin-top: 0";
  }
}

这是我尝试将其中一些更改为jquery的尝试：

$(window).scroll(function(){
  scrollFunction();
});

function scrollFunction() {
  var mqtab = window.matchMedia("(min-width:769px) and (max-width: 1023px)");
  var mqdesk = window.matchMedia("(min-width: 1024px)");
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    if (mqdesk.matches) {
      $("homelink").animate({width: "15%", "margin-left": "5%"});
      $("menuWrapper").animate({"margin-top": "0", "position": "absolute", "right": "5%", "bottom": "0"});
      $("menu").animate({"font-size": ".9em", "line-height": "1.52em", "margin-top": "1px"});
    }
  } else {
    document.getElementById("homelink").style.cssText = "width: 60%; margin: auto";
    document.getElementById("menuWrapper").style.cssText = "margin-top: 20px; position: relative";
    document.getElementById("menu").style.cssText = "font-size: 1em; line-height: 1.65em; margin-top: 0";
  }
}