Clickable button area and easing / sliding

Clickable button area and easing / sliding

I have created button links (.ease1) that when hovered over move up 20px and another image comes down to meet it ('div', this). My problem is that when the user hovers over the button, it floats up as it should, but then the mouse is not hovering over a clickable area. How do I fix this problem? Thanks for much! The code is:

HTML
<div id="link" class="ease1">
<a href="#"><img src="home.png" alt="" name="home" /></a>
<div class="ease2">
<a href="#"><img src="home2.png" /></a>
    </div>
</div>

CSS
.ease1 {
position:absolute;
top:0px;
left: 310px;
height:156px;
}
div.ease2 {
height:0px;
width:100%;
top:0px;
position:absolute;
overflow:hidden;
}
#link {
width: 163px;
margin-left:137px;
}

SCRIPT

$(document).ready(function(){
$(".ease1").mouseover(function(){
$('div', this).stop().animate({
height: '156px'},{queue:false, duration:600, easing: 'easeOutBack'
})
 });
 $(".ease1").mouseout(function(){
$('div', this).stop().animate({
height: '0px'},{queue:false, duration:600, easing: 'easeOutBack'
})
});
$(".ease1").mouseover(function(){
$(this).stop().animate({
top: '-20px'},{queue:false, duration:600, easing:'easeOutBack'
})
});
$(".ease1").mouseout(function(){
$(this).stop().animate({
top: '0px'
}, 600, function(){
});
});
});

    • Topic Participants

    • emily