flickering jquery animations

Hey guys I'm in the process of making this website here: http://craigmarkdrums.com (bare in mind that it's still very early days, so no judging, yeh hehe) and take a look at the menu. In firefox it works fine, but in chrome and safari you can see a flickering in the right hand corner. i think what is happenning is it's the box changing size. they are all li's in a ul. here is my jquery:

    $(function()
    {
        $('#nav li').hover(function()
        {
            $(this).children().stop(true, true).fadeIn();
            $(this).stop().animate({
                  width: '90px'
            }, 300, 'swing');
            $(this).siblings().stop().animate({
                  width: '42px'
            }, 300, 'swing');
         }, func开发者_JS百科tion()
        {
            $(this).children().stop(true, true).fadeOut();
            $(this).stop().animate({
                  width: '50px'
            }, 200);
            $(this).siblings().stop().animate({
                  width: '50px'
            }, 200);
         });
    });

any ideas what i'm doing wrong, or how i could improve this code?

cheers

Matt

---

You're intuition is correct. To accomplish this effect using floats, you'd need to handle the animation yourself and resize all LIs in a single step, making sure the sum of their widths matched the containing element. Or try using absolute positioning and handling the offsets yourself.

.. Or you could cheat and put the whole thing inside a container div whose background was the photo your using. That way any bleed through would be of the photo, not the white background.

---

I'd suggest moving over to a flexible box layout for this (CSS3). You can just increase the size of the box you want and the others will shrink away by themselves.

This page has a lot of examples of the flex-box layout (Take a look at the second example)

Add this css to your menu panels:

-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;

And then set the width of the hovered element. For added fluidity, try adding some slight transition delays like this (I've separated the values for easy reading and understanding):

-moz-transition-property: width;
-moz-transition-duration: 0.2s;
-moz-transition-easing: ease-in-out;
-webkit-transition-property: width;
-webkit-transition-duration: 0.2s;
-webkit-transition-easing: ease-in-out;
transition-property: width;
transition-duration: 0.2s;
transition-easing: ease-in-out;