jQuery: custom horizontal accordion width issue

Question

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 movement.

ANy advice would be much appreciated.

A.

Answer 1

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.

Answer 2

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?

Answer 3

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

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