Jquery 滑动div停止并进一步移动_Jquery_Html_Css

Jquery 滑动div停止并进一步移动

jquery html css

Jquery 滑动div停止并进一步移动,jquery,html,css,Jquery,Html,Css,我有两个div在上面。一个div（灰色的）从顶部滑入另一个div（黑色的）当你把鼠标放在黑色的div上时，灰色的就会滑出视野当您将鼠标放在灰色分区上时，灰色分区也会滑出视图，但当鼠标位于该分区的底部时，它会停止片刻，然后继续移动这是html文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="

我有两个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>

正如你们所看到的，我是jQuery的新手，所以我希望你们能帮我解决这个问题。

你们需要做的是将.logo放在.carousel中。看到我的更新，你会发现没有'关闭'

<div class="carosel">
     <div class="logo">bla bla mekker mekker</div>
 </div>

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

要使其正常工作，您需要将您的jQuery版本更新为1.8.3（对于动画函数的

始终

回调函数）

（避免使用1.9.1，因为下面的检查将破坏

！$（“.carosel”）.is（“：hover”）&&！$（“.logo”）.is（“：hover”）

。这是由于在jQuery 1.10.1中再次更正的错误造成的）

下面是示例代码：

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（）

函数的重复调用。

@Viridis，感谢您为我将代码放在JSFiddle上。：）我无法复制您遇到的问题。你在哪个浏览器中遇到这个问题？我可以复制这个问题，但我不知道你到底想做什么xD。当你只在灰色的上面徘徊时，它必须隐藏起来？我想我明白他在说什么；这是相当微妙的。快速移动时，动画将冻结。请看这个问题的答案：是的，这似乎比原来的好。不过，如果你快速地来回徘徊，你会发现口吃实际上仍然存在。我看不到任何百叶窗，如果它在那里，我怀疑它是可能解决的（我也不会有兴趣解决它，因为它在那里，它是如此微小）。事实证明我实际上是个弱智。。。那里需要有

stop（）

，出于某种原因，我正试图修复它在那里。。。这从来不是个问题。。我只是愚蠢。你一直都是对的。非常感谢你。这就是解决方案，但非常简单，再次感谢。[链接]我无法使用jQuery版本到1.8.3。我需要使用jQuery版本到1.6.4，因为我运行的是一个不适用于更高jQuery版本的3D carosel脚本。我看到用户1477388解决了问题，他只是把灰色的div换成黑色的div。太棒了。

$(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);
});

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);
});