我有两个 div 在彼此之上。一个 div(灰色的)从顶部滑入另一个(黑色的)。
当您将鼠标放在黑色 div 上时，灰色的 div 会滑出 View 。
当您将鼠标放在灰色的 div 上时，灰色的 div 也会滑出 View ，但当鼠标位于该 div 的底部时它会停止片刻，然后会走得更远。
这是html
<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(){ // $(document).ready shorthand
$('.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>
这是CSS
.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;
}
如您所见，我是 jQuery 的新手，所以我希望你们能在这方面帮助我。
最佳答案
您需要做的是将 .logo 放在 .carousel 中。查看我的更新，您会发现没有“关闭”。
<div class="carosel">
<div class="logo">bla bla mekker mekker</div>
</div>
JS:
$(document).ready(function(){
$(".carosel").hover(function(){
$('.logo').stop().animate({'top': '-150px'}, 1000);
}, function(){
$('.logo').stop().animate({'top': '0px'}, 1000);
});
$('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
});
关于jquery - 滑动 div 停止并走得更远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20660173/