развернуть высоту div onmouseover

Мне нужна высота в div 50 пикселей по умолчанию, и ее нужно изменить на 300 пикселей onmouseover. Я закодировал его ниже.

<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>

Этот код работает нормально, но согласно свойству CSS при наведении курсора высота сразу меняется. Теперь мне нужен стильный способ, например, медленно расширять div onmouseover и сокращать onmoveout. Как расширять и сжимать div при наведении курсора?

10
задан Mad coder. 20 January 2012 в 16:43
поделиться