向下/向上滑动不能正常工作

Question

在过去的几天里，我把我的菜单换成了手机友好的版本。到目前为止已经差不多完成了，只剩下一个问题:我使用jQuery slideUp和slideDown使子菜单(在中)可见。不幸的是，这些都不能正常工作:滑动并不像它应该的那样平滑，但速度非常快。相反，使用slideToggle并没有让事情变得更好。另一方面，使完整菜单可见的菜单按钮可以很好地滑动；我这里使用的是slideToggle。我的JS代码：

$("#Navigation li.submenu").click(function () {
    if ($("#menu02 div#menu-icon").css("display") == "block") {
        if ($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).children("ul").slideUp("slow");
            $(this).css("background-position", "right -100px")
        } else {
            $(this).addClass("open");
            $(this).children("ul").slideDown("slow");
            $(this).css("background-position", "right -170px")
        }
        return false;
    }
});

我的测试页面：http://ulrichbangert.de/indexr3.php (将视口调整为较小的宽度，直到菜单有一列为止。)最好的问候--乌尔里希

Answer 1

动画在我的机器上是平滑的。我认为问题是你的网站上分配了大量的动画，这使得渲染变得很繁重。当您为菜单设置动画时，您会向下滑动整个站点，这会强制在每个动画步骤中进行回流(重新计算和重新渲染)。尝试将菜单设置为绝对菜单，这样它就会在站点前面滑动，因此不会强制整个站点回流。或者，您可以尝试在向下滑动菜单的同时暂停一些其他动画。