Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div.
Hovering your mouse over the black div causes the gray one to slide out of view.
If you hover over the gray div, it also slides out but pauses momentarily when the mouse reaches the bottom before continuing.
This is the html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/logo.css">
<script>
$(document).ready(function(){
$(".carosel,.logo").hover(function(){
$('.logo').stop().animate({'top': '-150px'}, 1000);
}, function(){
$('.logo').stop().animate({'top': '0px'}, 1000);
});
});
</script>
<script>
$(function(){
$('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
});
</script>
</head>
<body>
<div class="container">
<div class="carosel"> </div>
<div class="logo"> bla bla mekker mekker </div>
</div>
</body>
</html>
This is the css code:
.container {
height: 800px;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
.logo {
height: 150px;
width: 800px;
color: #FFFFFF;
background-color: #000000;
position:absolute;
top:-150px;
}
.carosel {
height: 250px;
width: 800px;
background-color: #202020;
position:absolute;
top:0px;
}
If you have any tips or suggestions for improving this jQuery animation, please let me know as I am still learning.