jQuery Höhenanimation springt, wenn das animierte Element mehr als 1 Reihe von schwebenden Kindern hat

Question

Code hier eingebenDie Lösung für dieses Problem entzieht sich mir, und leider auch die Möglichkeit, das Problem außerhalb der Seite, an der ich gerade arbeite, zu reproduzieren.

Meine Frage ist dies: hat jemand alle Informationen über eine jQuery-Höhe-Animation (wie slideUp(), slideDown() oder slideToggle()) animieren teilweise dann "Springen" den Rest des Weges, und was verursacht es?

Ich habe hier eine Fiedel: http://jsfiddle.net/d7tbh/

HINWEIS: Bevor Sie mich wegen der Fiedel abwählen, lesen Sie bitte den Rest.

Das Fiddle stellt ein funktionierendes Beispiel für das dar, was ich zu erreichen versuche, aber leider kann ich das Problem überhaupt nicht reproduzieren. Die Seite, an der ich arbeite, kann aus verschiedenen Gründen nicht hier gepostet werden, was nicht ideal ist, aber wenn jemand schon einmal mit diesem Problem konfrontiert war, wäre es hilfreich, das zu wissen (und was er dagegen getan hat).

Eine eingehendere Erklärung des Problems:

Gleiches Markup und Css und Script zum Fiddle. Ein Klick auf das .header Element gleitet das .child-Element nach unten. Allerdings ist die Höhe des .child animiert auf die Höhe von einem .child-item Element, unabhängig davon, wie viele "Reihen" es gibt. Sobald diese Animation abgeschlossen ist, wird die Höhe von .child springt auf die volle Höhe, die erforderlich ist, um alle .child-item Kinder. Aber auf der Geige funktioniert es gut - irgendwelche Ideen?

P.S. Ich weiß, dass es ein Problem ist, den Rest des Codes nicht zu posten, aber es liegt nicht in meiner Macht, ich habe mitgeteilt, was ich kann und das Problem so gut wie möglich beschrieben. Hoffentlich ist es genug für jemanden, der das gleiche Problem schon einmal hatte, um es zu erkennen und vielleicht zu helfen, die Ursache zu finden.

Answer 1

Das ist zwar nicht die beste Antwort, aber ich habe es so gelöst, dass ich eine <br style='clear:both;'/> auf der Seite alle 3 Child-Divs, um die Zeilen manuell zu unterbrechen.

Damit wurde das slideDown() Animation und machte es glatt und stoppte es springen.

Das Problem bei dieser Lösung ist, dass sie davon abhängt, dass Sie in der Lage sind, eine <br> jede x Kinder (dies kann mit js getan werden, aber ich benutzte php) und auch, dass es bedeutet, dass, wenn Sie ein flüssiges Layout haben, wird dies auf breiteren / größeren Bildschirmen brechen, aber wie mein ist ein festes Layout macht es keine Vorteile.

Der Code:

Das Skript und die CSS sind unverändert, das Einzige, was ich tue, ist, ein wenig zusätzliches Markup einzufügen:

Das PHP, das ich verwendet habe (der Modultest ist alles, was es dazu gibt):

$count=0;
do {
  $count++;
  echo '<div class="child-item">etc</div>';

  if ($count%3==0)
  {
    //this is the third in this row, print a break
    echo '<br style="clear:both;"/>';
  }
}while($sqlResults);

Wie Sie etwas Ähnliches in jQuery erreichen können:

var count=0;
$('.child').each(function(){
    count=0;
    //for each container element, loop through its children
    $(this).children('.child-item').each(function(){
        count++;
        if (count%3==0)
        {
           //this item is the third in a row, print a br.
           $(this).after('<br style="clear:both;"/>');
        }
    });
});

EDIT: Fiddle-Skript aktualisiert http://jsfiddle.net/d7tbh/1/