Jquery 鼠标悬停在 div SlideUp 上和鼠标移出 div SlideDown
这是我的代码http://jsfiddle.net/AB6J3/7/你可以看到，编辑等。
当我滚动到红色边框框时，橙色框应该向上滑动，当鼠标移开时它应该向下滑动。它对于另一种方式效果很好，但是当我将slideDown更改为slideUp时，它不起作用：/我错过了什么？
欣赏有帮助。
<!DOCTYPE html>
<html>
<head>
<style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }
#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">
<div id="monster"></div>
<div id="clickk"></div><br />
<div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>
<script>
$("#clickk").hover(function () {
if ($("#monster").is(":hidden")) {
$("#monster").slideDown("fast");
} else {
$("#monster").slideUp("fast");
}
});
</script>
</body>
</html>
Here is my code http://jsfiddle.net/AB6J3/7/ you can see, edit, etc.
When I roll over to red border box, the orange box should slide up and at mouse out it should slide down. it works well for the other way, but when I change slideDown to slideUp, it doesnt work :/ what am I missing?
Appreciate helps.
<!DOCTYPE html>
<html>
<head>
<style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }
#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">
<div id="monster"></div>
<div id="clickk"></div><br />
<div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>
<script>
$("#clickk").hover(function () {
if ($("#monster").is(":hidden")) {
$("#monster").slideDown("fast");
} else {
$("#monster").slideUp("fast");
}
});
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你最好在这里进行一些 CSS 调整，如下所示：
然后像这样使用 jQuery：
你可以测试一下在这里。
I think you're better off with some CSS tweaks here, like this:
Then jQuery like this:
You can test it out here.
您应该尝试以下操作：
.hover()的第二个参数是 mouseout 函数。You should try the following:
The second argument to
.hover()is the mouseout-function.