I am creating a "simple" animated menu using .animate() to enlarge the menu item the user hovers over. This works almost right but it does some odd things if they user moves the cursor quickly. Plus the elements don't always animate simultaneously.
Easiest way to show it is with the following link.
or
<head>
<script src="jquery-ui/js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#test1").hover( function () {
$(this).animate( { width:"599px",left:"0px", height:"168px" }, 100 )
},
function () {
$(this).animate( { width:"246px",left:"9px", height:"84px" }, 100 )
}
);
$("#test2").hover( function () {
$(this).animate( { width:"599px",left:"0px", height:"168px", top:"-21px" }, 100 )
$(".test").animate( { top:"-21px" }, 100 )
},
function () {
$(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
$(".test").animate( { top:"0px" }, 100 )
}
);
$("#test3").hover( function () {
$(this).animate( { width:"599px",left:"0px", height:"168px", top:"-63px" }, 100 )
$(".test").animate( { top:"-63px" }, 100 )
},
function () {
$(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
$(".test").animate( { top:"0px" }, 100 )
}
);
$("#test4").hover( function () {
$(this).animate( { width:"599px",left:"0px", height:"168px", top:"-84px" }, 100 )
$(".test").animate( { top:"-84px" }, 100 )
},
function () {
$(this).animate( { width:"246px",left:"9px", height:"84px", top:"0px" }, 100 )
$(".test").animate( { top:"0px" }, 100 )
}
);
});
</script>
<style type="text/css">
.container {
width:599px; background-color:#000;padding:0px; height:336px; overflow-y:hidden;
}
.test {
width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px;
}
</style>
</head>
<body>
<div class="container">
<div id="test1" class="test">
test
</div>
<div id="test2" class="test">
test
</div>
<div id="test3" class="test">
test
</div>
<div id="test4" class="test">
test
</div>
</div>
</body>
Any ideas?
Thanks