分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 滑动div停止并进一步发展，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在彼此的顶部有两个div.一个div(灰色)从顶部滑入另一个(黑色).

当您将鼠标放在黑色div上时,灰色滑块会滑出视野.

当您将鼠标放在灰色div上时,灰色滑块也会从视图中滑出,但当鼠标位于该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的新手,所以我希望你们能帮助我解决这个问题.

解决方法

@H_450_25@ 你需要做的是将.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);
});