延迟jQuery slideToggle动画

Question

我有自定义手风琴菜单。要在菜单中显示第二级选项，我选择使用slideToggle()。出于某种原因，它们在点击和动画发生之间存在延迟。

与同一页面上的另一个手风琴菜单相比，这是显而易见的......我发现绑定（点击）菜单项的功能几乎立即执行。问题是slideToggle动画似乎比它应该开始得晚。

我相信这可能会发生，因为我定位的是slideToggle()被调用的元素。

            var $expandableMenu = $(".expandable .level1");

            $expandableMenu.bind('click', function () {

                $(this).next().slideToggle(200, function () {
                    $(this).parent().toggleClass("opened");
                });

            });

也许问题是$(this).next()是一种缓慢的方法来定位我需要使用slideToggle()的元素？

你有什么想法？

编辑：我做了一个jsFiddle测试用例...很奇怪这个问题不会在这里发生。 http://jsfiddle.net/nYZNP仍在寻找问题。

Answer 1

如果您在移动设备上尝试此操作，动画启动可能需要更长时间，因为设备正在等待（甚至200ms +）以确保您没有尝试双击。如果是这种情况，您可以使用zepto.js等具有点按事件的图书馆或fastclick.js来模拟点击事件。

就选择器性能而言，$(this).parent()应该没问题。但是，在这种情况下，您可以通过不首先写入和读取变量来消除几毫秒，如下所示：

       $(".expandable .level1").bind('click', function () {

            $(this).next().slideToggle(200, function () {
                $(this).parent().toggleClass("opened");
            });
        });

此外，“从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。” （jQuery api）。或者换句话说，bind()已被弃用！

最后，一般规则是按标记名称过滤比按类名或ID快，因此$("li.expandable .level1")应该比$(".expandable .level1")更快。

也许您也可以更具体地了解具体情况，例如浏览器/设备或其他任何不同之处？

Answer 2

            $(this).next().slideToggle(200, "linear", function () {
                $(this).parent().toggleClass("opened");
            });

您是否尝试过使用其他缓动选项？

此外，如果您在移动设备上遇到此问题，延迟可能是移动设备如何处理可能具有50ms或更长的固有延迟的点击事件的一部分。