This javascript runs slowly in Firefox, how can I make it run smoothly?

Question

I've got a menubar that uses a bit of javascript for a nice effect. The hover effect runs smoothly in google chrome, safari and even internet explorer.

I've tried removing the images, that doesn't seem to do it. I tried disable

Here's the javascript:

$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
     .stop(true)
     .animate({
        'width':'181px',
        'height':'181px',
        'left':'0px'
     },250,'easeOutBack')
     .andSelf()
     .find('.sdt_wrap')
     .stop(true)
     .animate({'top':'140px'},350,'easeOutBack')
     .andSelf()
     .find('.sdt_active')
     .stop(true)
     .animate({'height':'171px'},250,function(){
    var $sub_menu = $elem.find('.sdt_box');
    if($sub_menu.length){
        var left = '181px';
        if($elem.parent().children().length == $elem.index()+1)
            left = '-181px';
        $sub_menu.show().animate({'left':left},200);
    }
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
    $sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
     .stop(true)
     .animate({'height':'0px'},300)
     .andSelf().find('img')
     .stop(true)
     .animate({
        'width':'0px',
        'height':'0px',
        'left':'85px'},400)
     .andSelf()
     .find('.sdt_wrap')
     .stop(true)
     .animate({'top':'25px'},500);
});});`

Here's the html:

<ul id="sdt_menu" class="sdt_menu">
    <li>
        <a href="#">
            <img src="images/1.jpg" alt=""/>
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
                <span class="sdt_link">Portfolio</span>
                <span class="sdt_descr">My work</span>
            </span>
        </a>
        <div class="sdt_box">
            <a href="#">Websites</a>
            <a href="#">Illustrations</a>
            <a href="#">Photography</a>
        </div>
    </li>
    ...
</ul>

and the css:

ul.sdt_menu {
 list-style:none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width:1020px;
 margin:0;
 padding:0
}

ul.sdt_menu a {
 text-decoration:none;
 outline:none
}

ul.sdt_menu li {
 -webkit-box-shadow:1px -1px 0 #000;
 -moz-box-shadow:1px -1px 0 #000;
 box-shadow:1px -1px 0 #000;
 float:left;
 width:180px;
 height:85px;
 position:relative;
 cursor:pointer;
 background:rgba(0,0,0,.6)
}

ul.sdt_menu li > a {
 position:absolute;
 top:0;
 left:0;
 width:180px;
 height:85px;
 z-index:110;
 -moz-box-shadow:0 0 1px #000 inset;
 -webkit-box-shadow:0 0 1px #000 inset;
 box-shadow:0 0 1px #000 inset
}

ul.sdt_menu li a img {
 border:none;
 position:absolute;
 width:0;
 height:0;
 bottom:0;
 left:85px;
 z-index:300;
 -moz-box-shadow:0 0 4px #000;
 -webkit-box-shadow:0 0 4px #000;
 box-shadow:0 0 4px #000}

ul.sdt_menu li span.sdt_wrap {
 font-weight:100;
 position:absolute;
 top:25px;
 left:0;
 width:180px;
 height:60px;
 z-index:215
}

ul.sdt_menu li span.sdt_active {
 position:absolute;
 background:#181818;
 top:85px;
 width:181px;
 height:0;
 left:0;
 z-index:214;
 -moz-box-shadow:0 0 9px #000 inset;
 -webkit-box-shadow:0 0 9px #000 inset;
 box-shadow:0 0 9px #000 inset
}

ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a {
 margin-left:15px;
 text-shadow:1px 1px 1px #000
}

ul.sdt_menu li span span.sdt_link {
 color:#fff;
 font-size:24px;
 float:left;
 clear:both
}

ul.sdt_menu li span span.sdt_descr {
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px;
 font-size:13px;
 letter-spacing:1px
}

ul.sdt_menu li div.sdt_box {
 position:absolute;
 width:181px;
 overflow:hidden;
 height:171px;
 top:85px;
 left:0;
 display:none;
 background:rgba(10,10,10,.85);
 z-index:103;
 border-right:1px #000 solid
}

ul.sdt_menu li div.sdt_box a {
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF
}

ul.sdt_menu li div.sdt_box a:first-child {
 margin-top:15px
}

ul.sdt_menu li div.sdt_box a:hover {
 color:#fff
}

Any idea what's causing the glitchyess in Firefox?

@jackson i am sure there are tons of menubar exmaples out there. Just one google search and u can get what ever want, by just few minor modifications.. The code you posted is horrible.. — Mohit Jain, Jun 05 '11 at 01:26
i think you are abusing the chain selection. also it is a good idea to run this code onload. because you are trying to animate before the code is rendered, an this will slow things down. — Ibu, Jun 05 '11 at 01:29
One other thing I would do, is wrap thus in a $(document).ready(), just because of the amount of work it is doing. Gives the Dom a chance to finish. — hivie7510, Jun 05 '11 at 01:47
Update. I stripped it down so the menubar was the only element on the page, and it runs smoothly. I think the problem is images underlying the menu, they are slowing it down. It's the shiny gradient I added to give the menu a little depth, and the image slider below. If I remove those two items, it runs smooth. Any idea why? Chrome and Safari render this perfectly! — alt, Jun 05 '11 at 02:25
It looks like you are now asking a new question. Is that why removed the accepted vote? — hivie7510, Jun 07 '11 at 02:56

score 2 · Answer 1 · answered Jun 05 '11 at 01:24

2

My first guess would be the sheer number of chained called or the selectors. I would download the free dynatrace Ajax edition. It will tell you exactly where the time is spent. My guess is the marshaling from JavaScript to the dom back with all of the chained calls. Or it could be the render time, but dynatrace will narrow it down perfectly.

answered Jun 05 '11 at 01:24

hivie7510

1,246
10
23

Chaining calls isn't in itself a bad thing; in fact it's a really good idea, because it saves the library the trouble of scrounging through the DOM over and over. – Pointy Jun 05 '11 at 01:33
Of course not, fluent calls are great. The number of calls can be a problem though, if you are not careful. – hivie7510 Jun 05 '11 at 01:41
I would have to agree, normally they are a good thing but I have never seen this many chained together before... – Jonathon Jun 05 '11 at 01:43
Thank YOU. I've no idea how to optimize my javascript. I just write it till it works, now I've got to learn to slim it down a bit. Any suggestions? – alt Jun 05 '11 at 02:05
Jackson, honestly javascript performance is a huge topic. But there is light at the end of the tunnel. If you take a look at blogs from Steve Souders or dynaTrace it will give you a good start. The things you want to look at are the amount of times that you are marshaling back to the dom and the selectors that you are using. These can be very costly. Animation in general is a costly operation due to the amount of dom manipulations that it must do to look good. I think that if you take a look at any good profiler(dynatrace) then you will get some better insight. – hivie7510 Jun 05 '11 at 02:50
One other thing, you may be using a library that is itself underperforming. Not all libraries/plugins follow the best practices for performance. I would maybe try someone else's plugin, maybe it will be faster and still give the same effect. – hivie7510 Jun 05 '11 at 02:53

score 0 · Accepted Answer · answered Jun 07 '11 at 01:04

0

The problem was with underlying images. I changed them to divs and set them as backgrounds and it worked like a charm. No idea why Firefox has such a problem displaying under my javascript then is did .

answered Jun 07 '11 at 01:04

alt

13,357
19
80
120

This javascript runs slowly in Firefox, how can I make it run smoothly?

2 Answers2