延迟的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仍在寻找问题所在。

- Chris Bier

---

加一赞为这个动画！这是解释问题的好方法。 - Adrian Wragg

jsFiddle复制的标记和jQuery：http://jsfiddle.net/nYZNP/ 奇怪的是，在这个fiddle中没有出现问题.... 嗯... - Chris Bier

你是如何创建这个动画的？ - Anders Lindén

@trojansdestroy 我已经排除了 jQuery 的问题可能性。jQuery 的版本不会影响这个问题。不幸的是，我没有一个现成的网站让任何人来尝试，但我已经发布了一个 fiddle 来复制这种情况。 - Chris Bier

你的答案可能在这里 answer. - bboydflo

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") 更快。

也许你还可以更具体地说明确切的情况，例如浏览器/设备或与你的代码示例不同的任何差异？

- BenMann

---

备用的 fastclick 仓库来自于 Github 上的“dave1010”，我更喜欢这个。你可以在这里交互式地查看常规和 fastclick 之间的区别（如果有的话）： http://3oheme.com/blog/2013/08/10/apply-fast-click-for-ios-to-your-website.html - Joe Atzberger

Answer 2

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

你尝试过使用不同的缓动选项吗？

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

- carter