jQuery: custom horizontal accordion width issue

Im trying to create a custom horizontal accordion style showcase. In terms of actual functionality, i have the framework (which can be seen here):

http://www.jsfiddle.net/adrianjacob/UdUus/

However my main bug bear (and the clients) is that if you look at the right hand side, there is always slight movement/flickering as the widths animate up and down.

Ideally I want it to appear smooth so only the opening/closing lists have movemen开发者_Python百科t.

ANy advice would be much appreciated.

A.

Use the animate function's step (it's not well documented)... I've updated the demo

var panels = $('#promo li');

panels.hoverIntent(

function() {
    if (!$(this).is('.expanded') && !panels.is(':animated')) {
        $(this).animate({
            width: 200
        }, {
            // width is the calculated width, ani is the animation object
            step: function(width, ani) {
                var w = Math.floor(width);
                // use 250 so we end up with 50 as the reduced size
                $('.expanded').css('width', (250 - w) + 'px');
                $(ani.elem).css('width', (200 - w) + 'px');
            },
            duration: 500,
            complete: function() {
                panels.removeClass('expanded');
                $(this).addClass('expanded');
            }
        });
    }
}, function() {});

A similar method is used in the Kwicks plugin.

You could try this plugin which may have figured out the bug. The example provided was too showy to actually tell.

Have you played around with jQuery UI easings?

You can also try to stop the event just when the div is opening.

The website with explanation is: http://api.jquery.com/stop/