jQuery鼠标滑过div slideUp和鼠标滑出div slideDown [英] Jquery mouse over div slideUp and mouse out div slideDown
本文介绍了jQuery鼠标滑过div slideUp和鼠标滑出div slideDown的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码 http://jsfiddle.net/AB6J3/7/ ，您可以查看，编辑等.
Here is my code http://jsfiddle.net/AB6J3/7/ you can see, edit, etc.
当我将鼠标悬停在红色边框上时，橙色框应向上滑动，鼠标移出时应向下滑动.它可以用另一种方式很好地工作，但是当我将slideDown更改为slideUp时，它不起作用:/我缺少了什么?
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?
感谢帮助.
<!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>
推荐答案
我认为您最好在此处进行一些CSS调整，例如:
I think you're better off with some CSS tweaks here, like this:
#monster {
background:#de9a44;
width:80px;
height:60px;
display:none;
position:absolute;
left: 0;
bottom: 0;
}
#clickk {
width:80px;
height:60px;
border:1px solid #cc0001;
background:transparent;
position:absolute;
top:0;
right:10px;
}
然后像这样的jQuery:
Then jQuery like this:
$("#clickk").hover(function () {
$("#monster").slideToggle("fast");
});
这篇关于jQuery鼠标滑过div slideUp和鼠标滑出div slideDown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
