Inline-Element einfügen und Verschiebung nach links animieren

Question

Ich habe versucht, dieses Problem seit einer Woche zu lösen, und es scheint einfach, so dass ich vielleicht etwas vermisse.

Ich möchte ein div auf dem Bildschirm (oder seinem Container) zentriert haben, und dann ein zweites div rechts davon einfügen, so dass danach die zwei von ihnen zentriert sind (Raum auf jeder Seite ist gleich).

Das Einfügen der zweiten Div ist kein Problem, aber ich brauche den ersten Block, um nach dem Einfügen des neuen Blocks dorthin zu gleiten.
http://jsfiddle.net/rdbLbnw1/

.container { 
    width:100%; 
    text-align:center; 
} 

.inside { 
    border:solid 1px black; 
    width:100px; 
    height:100px; 
    display:inline-block; 
} 

$(document).ready(function() { 
    $("#add").click(function() { 
     $(".container").append("<div class='inside'></div>"); 
    }); 
}); 

<div class="container"> 
    <div class="inside"></div> 
</div> 
<input id="add" type="button" value="add"/> 

Muß ich explizit berechnen, wo das ursprüngliche Feld, um am Ende wird und dann, dass animieren, oder gibt es einen besseren Weg, es zu tun?

Answer 1

Ich mag Ihre Frage so entscheiden, dies zu schreiben:

$(document).ready(function() { 
    var isInAction = false; 
    var intNumOfBoxes = 1; 
    var intMargin = 10; 
    $containerWidth = $(".container").width(); 
    $insideWidth = $(".inside").width(); 
    $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px'); 
    $("#add").click(function() { 
     if (!isInAction){ 
      isInAction = true; 
      intNumOfBoxes +=1; 
      $(".current").removeClass("current"); 
      $(".container").append("<div class='inside current'></div>"); 
      $('.inside').animate({ 
       'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px' 
      }, 300, function() { 
       $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px'); 
       $(".current").fadeIn(500,function(){ 
        isInAction = false; 
       }); 
      }); 
     } 
    }); 
}); 

Auch diese Klasse in CSS hinzufügen:

.current { 
    display:none; 
} 

Sie müssen nicht außer intMargin Variablen in JS-Code ändern. Sie können diese Variable ändern, um den Abstand zwischen den Feldern festzulegen.

Hinweis: Dieser Code funktioniert auch auf älteren Browsern und muss keine CSS3-Funktionen wie transition unterstützen.

Aktualisierung: Einige Fehler wie wiederholte Klicks behoben.

Check JSFiddle Demo

Answer 2

Erstens können wir nur Dinge animieren, die explizite numerische Werte wie Breite, links oder Rand haben. Wir können Dinge wie die Ausrichtung nicht animieren (die tatsächlich dieselbe Randeigenschaft verwenden, aber implizit, egal). Wenn wir die Breite des eingefügten div kennen, fügen wir es einfach unserem Container hinzu.

1) selbst Zentrum Container Lassen Sie uns und fügen Sie Übergang zu ihm

.container { 
    width: 102px; /* set explicit width; 102 - because of borders */ 
    margin: auto; /* set margin to 'auto' - that will centre the div */ 
    transition: width 0.5s; 
} 

2) erhöhen Sie dann die Breite als Add div

3) Aber warten Sie! Wenn wir div zu einem zu engen Container hinzufügen, wird es nach unten, nicht nach rechts hinzugefügt. Also brauchen wir einen anderen Container auf die passende Breite vor.

Siehe letztes Beispiel on JSFiddle.

BTW, entfernen Sie alle Zeilenumbrüche und Tabs aus Ihrem Code, wenn Sie Inline-Block verwenden, da es Leerzeichen zwischen Ihren Blöcken verursacht.