How to animate float:left divs? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 6 years ago.

So I have a series of float:left div elements in a toolbar in my web-app. One of them, when clicked, expands to the right via a jQuery sliding animation. All the divs to the right of this div should slide over to make room for its increased size, but instead they jump to their new position to make room, then jump back when I shrink it again. How can I fix this to a smooth slide?

I think I need .animate(), but I can't figure out how to do without changing to position: absolute, which I don't want to use.

回答1:

I'm not sure I fully understand you but my guess was that:

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

Here's the whole thing: 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;
     });
 });

Second UPDATE

Check this example: 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);
});

来源：https://stackoverflow.com/questions/15372315/how-to-animate-floatleft-divs