javascript - Jquery UIアニメーションは、浮動要素に効果を適用しません

Question

問題を説明するためにフィドルを作成しました： http://jsfiddle.net/E5XvT/2/

次のコードで、Jquery UI のアニメーション機能を使用して、要素の背景色をフェードインしています。

HTML:

<div id="element">   
<h1>test</h1>
<div id="child">not animated</div>
<div id="child">not animated</div>    
</div>

CSS:

 #element {
 width:300px;
 margin-left:auto;
 margin-right:auto;
 } 
 #child {
 background-color: blue;
 width: 100px;
 float: left;
 }

Jクエリ:

$('#element').animate({backgroundColor: '#FFFF99'}, 'slow');

問題は、この関数がフロートされた子要素に効果を適用していないことです。フローティングを削除すると機能します

ありがとう

score 2 · Accepted Answer

オーバーフローを追加: 非表示; 子供の身長を尊重するために親に：

#element{
  overflow: hidden;
}

また

clear:both を最新の要素として空の要素を追加します。

<div id="element">   
 <h1>test</h1>
 <div id="child">not animated</div>
 <div id="child">not animated</div>
 <div style="clear:both;"></div>
</div>

score 2 · Accepted Answer

フロートされた子孫の新しいブロックフォーマットコンテキストを作成する必要があります(フロートされた要素は通常のフローから取り出されるため) - 親に追加overflow: hidden;し、#element

score 2 · Accepted Answer

親要素のフロートをクリアする必要があります。通常、clearfix クラスがあります。Nicolas Gallagher の microclearfix は次のとおりです...

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

次に、単に次のように記述します。

<div id="element" class="cf">

3 に答える 3