JQuery: custom horizontal harmonic width

Question

I am trying to create a regular horizontal accordion style display case. As for the actual functionality, I have a structure (which can be seen here):

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

However, my main mistake (and clients) is that if you look at the right side, there is always a slight movement / flicker when the widths enliven up and down.

Ideally, I want it to look smooth, so only open / close lists have movement.

ANY advice would be greatly appreciated.

a.

Answer 1

Use the animate function step (it is not documented) ... I 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 can try this plugin , which may have calculated the error. The above example was too spectacular to actually say.

Have you played using jQuery UI easings?

Answer 3

You can also stop the event only after opening the div.

Website with explanation: http://api.jquery.com/stop/