StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSimple jQuery super slow on firefox, IE, super fast on Chrome
text
Body
copied!<p>Brand new to jQuery. Have implemented the function below into a page I am developing, and what I thought was relatively simple jQuery is proving problematic.</p> <pre><code>$(document).ready(function(){ var leftnav = $("#leftnav ul li"); leftnav.hover(function(){ $(this).children('ul').stop(true, true).slideDown(); },function(){ $(this).children('ul').stop(true, true).slideUp(); }); }); </code></pre> <p>Basically, this runs brilliantly in Chrome and Opera - lovely, smooth, fast. In Firefox and IE8 it runs like a dog - jerky, slow, like it's wearing a suit of mud. As I said I am brand new to jQuery - this is the first time I have tried to implement any into a web page. I have tried the same using mouseenter and mouseleave, but there is little difference. </p> <p>I would have expected problems with IE8, but bit gutted that firefox is giving me issues as I have always sworn by it. Do I just have to accept this and make consessions?</p> <p>Thanks</p> <p>EDIT : Ok, I've managed to speed things up a bit. Whilst still not grease lightning Chrome performance, IE8 and firefox are now what I would call acceptable. I got some tips from this excellent page - <a href="http://www.artzstudio.com/2009/04/jquery-performance-rules/" rel="nofollow">http://www.artzstudio.com/2009/04/jquery-performance-rules/</a></p> <p>I simply made my selector var more specific by giving '#leftnav ul' it's own ID in my markup- #list, and then referencing that in my jQuery code. So,</p> <pre><code>var leftnav = $("#leftnav ul li"); </code></pre> <p>becomes:</p> <pre><code>var leftnavUl = $("#list li"); </code></pre> <p>From what I gather this allows jQuery to hone in more efficiently on the element in question.</p> <p>Using console.time in firebug, I have noticed the speed increase from ~15ms to ~10ms for each slideDown operation, just by being more specific in my selectors. </p> <p>Like I say, not as qucik as Chrome still, but getting better!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload