Question

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');
         }, function()
        {
            $(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

Answer 1

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.