Question

在过去的几天里，我将菜单切换为适合移动设备的版本。到目前为止几乎完成了，只剩下一个问题：我使用jQuery slideUp和slideDown使子菜单（in）可见。不幸的是，这些不能正常工作：滑动不是很平滑，因为它应该非常快速。使用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 （将视口调整为较小的宽度，直到菜单中有一列。）最好的问候 - Ulrich

Answer 1

我的机器上的动画很流畅。我认为问题在于你的网站上有很多动画，这使得渲染很重要。为菜单设置动画时，可以向下滑动整个网站，这会在每个动画步骤中强制重排（重新计算和重新渲染）。尝试将菜单设置为绝对，因此它会在网站前滑动，因此不会强制整个网站重排。或者，您可以在向下滑动菜单时尝试暂停其他一些动画。

slideDown / Up无法正常工作

1 个答案: