jQuery UIスライドジャンプでスペースを作成してアニメーションを作成する

Question

jQuery UIのスライドアニメーションを使用して、他の2つの行の間にdivを挿入していますが、アニメーションをトリガーするときにdivがスライドするのに必要なスペースがありますアニメーションなしでジャンプが表示され、アニメーションが表示されます。

編集：JSFiddle問題は以下の人のおかげで修正されました。新JSFiddleがある：https://jsfiddle.net/7ryukzd7/3/ しかし、最初の問題は、私は取得しない理由:-)

まま、JSFiddleにdivがインラインが、（ブラウザでは発生しません）休憩をスライドさせていません。 ..とにかくポイントはそれにもかかわらず描かれています。

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：jQueryのUIと

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

JS：

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

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

私のコード（これは今を解決しています）私は同じような問題をここに見ました：jQuery UI show using slide animation jumps to full height before animation startsしかし私の状況に適応できませんでした。

すべてのヘルプは非常になぜJSFiddleアニメーションとインラインブロックブレーク（解決）または

Answer 1

@Michaelコーカー:-)実際の問題に正解であるいずれかの理由で、高く評価されるだろう。 div.hiddenをアニメーション化する過程で、スライドアニメーションエフェクトはエレメントに一時的なCSSを適用します。これにはdisplay:inline-blockのぎこちない部分が含まれます。

実際には、ネイティブのjQ-UIスタイルを上書きするオプションがあります。もう1つは、div要素のインラインブロックスタイリングに依存しないようにして、アニメーションがそのように反応しないようにすることです。そうするための一つの方法はフローティング要素と次のようになります。

.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/