Jquery鼠标移入div向上滑动，鼠标移出div向下滑动

Question

Jquery鼠标移入div向上滑动，鼠标移出div向下滑动

3

这是我的代码，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>

- designer-trying-coding

2个回答

2

你应该尝试以下方法：

$("#clickk").hover(function () {
    $("#monster").slideUp("fast");
}, function() {
    $("#monster").slideDown("fast");
});

.hover() 的第二个参数是鼠标移出时执行的函数。

- jwueller

谢谢您的时间，但我已经尝试过了，在那种情况下根本没有幻灯片框:/ - designer-trying-coding

问题是，该框默认情况下是隐藏的。只有在第一次将其悬停时才会出现。唯一需要的更改是默认情况下使其可见。 - jwueller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

我认为在这里使用一些CSS调整会更好，比如：

#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：

$("#clickk").hover(function () {
  $("#monster").slideToggle("fast");
});

您可以在此处测试。链接。