Question

所以我在我的网络应用程序的工具栏中有一系列浮动：左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;
     });
 });

<强>更新

以下是整个事情： 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);
});

如何动画浮动：左div？

1 个答案: