次の例は私の問題を説明しています: リンク: http://jsfiddle.net/sTFT3/1/
HTML
<div class="parent">
<img src="http://farm8.staticflickr.com/7292/9388249554_18f230a0ce_z.jpg" class="image"/>
<img src="http://farm3.staticflickr.com/2814/9389265805_1fd4040203_z.jpg"/>
<span class="text">Lorem Ipsum</span>
</div>
CSS
.parent {
position: relative
}
.parent .text {
position: absolute;
top: 0;
left: 0;
background: #ccc;
width: 80%;
max-height: 0;
overflow: hidden;
-webkit-transition : max-height 1s linear 0s;
-moz-transition : max-height 1s linear 0s;
-ms-transition : max-height 1s linear 0s;
-o-transition : max-height 1s linear 0s;
transition : max-height 1s linear 0s;
}
.image {
position: absolute;
opacity: 0;
-webkit-transition : opacity 1s ease-in 0s;
-moz-transition : opacity 1s ease-in 0s;
-ms-transition : opacity 1s ease-in 0s;
-o-transition : opacity 1s ease-in 0s;
transition : opacity 1s ease-in 0s;
}
.parent:hover .text {
max-height: 600px;
}
.parent:hover .image {
opacity: 1;
}
アニメーションを一緒に開始する必要がありますが、互いに待機しています。その種の問題を抱えている人は他に見つかりませんでした。