Question

我有两个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的新手，所以我希望你们能帮助我解决这个问题。

Answer 1

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

http://jsfiddle.net/vFJ27/6/

Answer 2

我相信这是您想要的解决方案：Example JSFiddle

要实现此功能，您需要将 jQuery版本更新为1.8.3 （对于Animate函数的always回调函数）

（避免使用1.9.1 ，因为以下检查会中断!$(".carosel").is(":hover") && !$(".logo").is(":hover")。这是由于在jQuery 1.10.1中再次更正了一个Bug）

以下是示例代码：

var hideRunning = false;

$(document).ready(function(){
    $(".carosel").hover(function() {
        if (!hideRunning) {
            hideRunning = true;
            $('.logo').stop().animate({'top': '-150px'}, {
                duration:1000,
                always:function() {
                    hideRunning = false;
                }
            });
        }
    }, function() {
        if (!$(".carosel").is(":hover") && !$(".logo").is(":hover")) {
                $('.logo').stop().animate({'top': '0px'}, 1000);
        }
    });
});

$(function(){  // $(document).ready shorthand
    $('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
});

现在，当您将鼠标悬停在任一div上时，会检查动画当前是否正在运行，如果是，则不再次调用.stop().animate()。

此外，当您将鼠标悬停在div之外时，它会检查div是否当前悬停，如果是，则不再次调用.stop().animate()。

这只是删除了对.stop()函数的重复调用。

滑动div停止并进一步

2 个答案: