jQuery UI Folie springt, um Platz zu schaffen, animiert dann

Question

Ich verwende die Folie Animation von jQuery UI, um ein div zwischen zwei anderen in einer Zeile einzufügen, aber beim Auslösen der Animation ist der Platz für das div zu gleiten erforderlich Sprung erscheint ohne Animation und dann kommt die Animation.

EDIT: JSFiddle Problem behoben, dank der Jungs unten. New JSFiddle ist: https://jsfiddle.net/7ryukzd7/3/ Aber die Erstausstellung bleibt :-)

Für einen Grund, warum ich in JSFiddle nicht bekommen, die div rutscht nicht inline aber Pausen (die in einem Browser nicht passiert). .. Jedenfalls ist der Punkt trotzdem illustriert. (ist dies nun gelöst)

Mein Code:

HTML:

<div class="bloc cover" style="background-color: blue;"><p class="readmore_button">Read More</p></div> 
<div class="bloc hidden" style="background-color: red"><p>Lorem ipsum dolor sit amet. </p></div> 
<div class="bloc cover" style="background-color: blue;"></div> 
<div class="bloc cover" style="background-color: blue;"></div> 

CSS:

.bloc { 
    display: inline-block; 
    vertical-align: top; 
} 
.cover { 
    width: 100 px; 
    height: 100 px; 
} 
.hidden { 
    height: 100 px; 
    width: 200 px; 
} 

JS mit jQuery UI:

$('.hidden').hide(); 

$('.readmore_button').on('click', function() { 
    $(this).parents('.bloc').next('.hidden').toggle("slide", 1000); 
}); 

Ich sah ähnliche Probleme hier: jQuery UI show using slide animation jumps to full height before animation starts aber konnte es nicht an meine Situation anpassen.

Jede Hilfe wäre sehr geschätzt, entweder auf dem Grund, warum inline-block bricht mit Animation in JSFiddle (gelöst) oder auf der aktuellen Ausgabe :-)

Answer 1

@ Michael Coker ist richtig; Im Verlauf des Animierens der div.hidden wendet der Folienanimationseffekt temporäres CSS auf das Element an, das ein Clobbering von display:inline-block enthält.

Eine Option ist in der Tat, den nativen jQ-ui-Stil zu überschreiben; Ein anderes ist, sich nicht auf Inline-Block-Styling für Ihre div Elemente zu verlassen, so dass die Animation nicht so reagiert. Eine Möglichkeit, dies zu tun mit Floats wäre:

.bloc { 
    /*display: inline-block;*/ 
    vertical-align: top; 
    float: left; 
    margin: 0 2px /* added to recreate the spacing inline-block elements have */ 
} 

https://jsfiddle.net/7ryukzd7/3/