jQuery的鼠标在DIV效果基本show和鼠标了DIV了slideDown

这里是我的代码http://jsfiddle.net/AB6J3/7/你可以看到，编辑等jQuery的鼠标在DIV效果基本show和鼠标了DIV了slideDown

当我翻身，以红色边框中，橙色框应该向上滑动，并在鼠标它应该滑落。它适用于其他方式，但是当我将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>

来源

2010-09-06 designer-trying-coding

我觉得你有一些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"); 
});

You can test it out here。

来源

2010-09-06 23:47:10

是的男人！我知道这是关于CSS！谢谢！ – 2010-09-06 23:47:55

也，你的js代码更干净！感谢您的大力帮助！欣赏。我今天从你身上学到了一件新事物。 :) – 2010-09-06 23:49:34

@artmania - 欢迎:) – 2010-09-06 23:51:09

你应该尝试以下操作：

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

的第二个参数.hover()是鼠标移开功能。

来源

2010-09-06 23:39:01 jwueller

感谢您的时间，但我已经尝试过，在那种情况下根本没有幻灯片框：/ – 2010-09-06 23:47:15

问题是，该框默认是隐藏的。它会出现，如果你第一次徘徊。所需的唯一更改是使其默认可见。 – jwueller 2010-09-06 23:56:27

jQuery的鼠标在DIV效果基本show和鼠标了DIV了slideDown

回答

相关问题