如何动画浮动：左div？

所以我在web-app的工具栏中有一系列float：left div元素。 其中一个，当点击时，通过jQuery滑动动画向右扩展。 这个div右边的所有div应该滑过来为它增加的大小腾出空间，但是他们跳到他们的新位置腾出空间，然后当我再次缩小它时跳回去。 如何将其修复为平滑的幻灯片？

我想我需要.animate（），但我无法弄清楚如何在不改变位置的情况下做到：绝对，我不想使用它。

Answer 1

我不确定我完全理解你，但我的猜测是：

http://jsfiddle.net/QvCyx/

  $('#contrast').click(function () { var w = $('#contrastSlider').width(); $('#contrastSlider').toggle("slide", 300); $('#about').animate({ 'margin-left': -w }, 300, function () { this.style.marginLeft = 0; }); }); 

UPDATE

这是整个事情： http ： //jsfiddle.net/CPR7R/

  $('#contrast').click(function () { var cs = $('#contrastSlider'), w = cs.width(); if (!cs.is(':visible')) { $('#about').css('margin-left',-w); w = 0; } cs.toggle("slide", 300); $('#about').animate({ 'margin-left': -w }, 300, function () { this.style.marginLeft = 0; }); }); 

第二次更新

查看此示例： http ： //jsfiddle.net/EpCpr/

 $('#container').on('click', '.slideTriggerer', function () { var that = $(this), sliderA = that.siblings('.slideA'), sliderB = that.siblings('.slideB'), defml = parseInt( sliderB.css('margin-left') ), w = sliderA.outerWidth(); if (!sliderA.is(':visible')) { sliderB.css('margin-left', -w+defml); w = defml; } sliderB.animate({ 'margin-left': -w+defml }, 300, function () { sliderB.css('margin-left', defml); }); sliderA.toggle("slide", 300); });