performance - Delayed jQuery slideToggle animation -

i have custom accordion menu. display second-level options in menu, chose use slidetoggle(). reason, there delay between when click , when animation occurs.

this evident when seen in contrast accordion menu on same page... found out function bound (on click) menu item gets executed immediately. problem slidetoggle animation seems start later should.

i believe may happening because of way targeting element slidetoggle() being called on.

            var $expandablemenu = $(".expandable .level1");              $expandablemenu.bind('click', function () {                  $(this).next().slidetoggle(200, function () {                     $(this).parent().toggleclass("opened");                 });              }); 

maybe problem $(this).next() slow way target element need use slidetoggle() on?

what thoughts?

edit: made jsfiddle test case... oddly enough issue not happen here. http://jsfiddle.net/nyznp still looking issue.

if trying on mobile device, may indeed take longer animation start, device waiting (even 200ms+) make sure not attempting double-tap. if case go libraries zepto.js, has tap event or fastclick.js emulates tap events.

in terms of selector performance, $(this).parent() should fine. in case however, eliminate few milliseconds not writing , reading variable first, this:

       $(".expandable .level1").bind('click', function () {              $(this).next().slidetoggle(200, function () {                 $(this).parent().toggleclass("opened");             });         }); 

also, "as of jquery 1.7, .on() method preferred method attaching event handlers document." (jquery api). or in other words, bind() deprecated!

and there general rule filtering tag name faster classname or id, $("li.expandable .level1") should faster $(".expandable .level1").

maybe can more specific exact circumstances, such browser/device or other difference fiddle?