Есть DIV в котором еще 4. Хочу сделать так, чтобы при наведении курсора в область где они расположены, эти четыре div`a постепенно меняли высоту до определенной. Проблема в том что при наведении, меняется на 1 пиксель и останавливается. Не могу найти ошибку в скрипте
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="red">
<style>
#postcards{
height: 275px;
width: 340px;
background-color: black;
position: absolute; left: 220px;top:337px;"
}
#postcards1,#postcards2,#postcards3,#postcards4{
background-color: #62b2ff;
text-align: center;}
</style>
<div id="postcards" onmouseover="f(event)">
<div id="postcards1" style=" position:absolute; left: 0px; top: 0px; height:137px;width: 170px;"></div>
<div id="postcards2" style=" position:absolute; left: 0px; top: 137px;height:137px;width: 170px;"></div>
<div id="postcards3" style=" position:absolute; left: 170px; top: 0px;height:137px;width: 170px;"></div>
<div id="postcards4" style=" position:absolute; left: 170px; top: 137px;height:137px;width: 170px;"></div>
</div>
<script>
var a=document.getElementById('postcards1');
function f(event) {
event=event || window.event;
var target = event.target || event.srcElement;
if (parseInt(a.style.height)>10&&(target.id=='postcards4'||target.id=='postcards3'||target.id=='postcards2'||target.id=='postcards1'||target.id=='postcards'))
{
a.style.height=parseInt(a.style.height)-1+'px';
setTimeout("f(event)",100);
}}
</script>
</body>
</html>