divのサイズ変更でスムーズに子要素を移動

Question

スクロールするときに元のサイズの約4分の1になるヘッダーがあり、その内部の要素を移動する必要があります。今、私はちょうど新しいサイズのdivにそれらを正しく配置するために、子供の要素にマージンを設定しています。これは、divのサイズを変更した後に良い構造を作成しましたが、私はアニメーションがないので、新しい位置にただちにスナップするので、変更が行われている間に見栄えが悪くなります。

私は、要素を点Aから点Bに移動するときに、どのようにスムーズに遷移させることができますか？ヘッダーのdivから

関連するCSS：

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
} 

と子供たちはただ、基本的なdisplay: blockを持つ要素、およびそれらを正しく配置するために、いくつかのマージンです。

トランジションをスムーズにするために、私ができることはありますか？私は.animate()を見ましたが、それは私には当てはまらない絶対的に位置づけられた要素と共に働くようです。

Answer 1

あなたは絶対位置だけでなく、とjQueryので.animate()要素をすることができるが、固定された相対も有します。

ここには、例えば相対位置を持つJSFiddleがあります。

まだ.animate()のコメントを使用したくない場合は、