Delayed jQuery slideToggle animation

Question

I have a custom accordion menu. To display second-level options in the menu, I chose to use slideToggle(). For some reason, There is a delay between when they click and when the animation occurs.

This is evident when seen in contrast with another accordion menu on the same page... I found out that the function that is bound (on click) to the menu item gets executed almost immediately. The problem is that the slideToggle animation seems to start later than it should.

I believe this may be happening because of the way I am targeting the element that slideToggle() is being called on.

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

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

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

            });

Maybe the problem is that $(this).next() is a slow way to target the element that I need to use slideToggle() on?

What are your thoughts?

Edit: I made a jsFiddle test case... Oddly enough the issue does not happen here. http://jsfiddle.net/nYZNP Still looking for the issue.

Answer 1

If you are trying this on a mobile device, it may indeed take longer for the animation to start, as the device is waiting (even 200ms+) to make sure you are not attempting a double-tap. If this is the case you could go for libraries like zepto.js, which has a tap event or fastclick.js which emulates tap events.

in terms of selector performance, $(this).parent() should be fine. In this case however, you could eliminate a few milliseconds by not writing and reading the variable first, like this:

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

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

Also, "As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document." (jQuery api). Or in other words, bind() is deprecated!

And finally there is the general rule that filtering by tag name is faster than by classname or id, so $("li.expandable .level1") should be faster than $(".expandable .level1").

Maybe you can also be more specific about the exact circumstances, such as browser/device or any other difference to your fiddle?