动画宽度：当宽度为零时内容会消失

Question

我有红色和blakc divs;当我将鼠标悬停在parrent上时，红色div应该通过将宽度更改为实际宽度来显示！但问题是当宽度为0px时;内容显示！你能帮我解决一下吗？

Fiddle

 $('#container').mouseover(function(){
$('#red').stop(true,true).animate({ width: '110px'}, 100);
})
$('#container').mouseout(function(){
$('#red').stop(true,true).animate({ width: '0px'}, 100);
})

更新

Solved Fiddle 但是现在当红色div调整到实际宽度时，文本“观看视频”会变为两行！如何强迫它在一行？

Answer 1

http://jsfiddle.net/pTU3L/2/

加入 overflow:hidden

到#red div。 检查更新的小提琴