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

回答

相關問題