JQuery - div淡入淡出

我有div，它有id'內容'。它是可見的。JQuery - div淡入淡出

<div id="wrapper" style="display:block"> 
    <div id="content"> 
    Some text 
    </div> 
</div>

現在我想淡出出來：

$('#wrapper').fadeIn(1500); 
$('#content').click(function(){ 
    $(this).fadeOut(1500); 
});

並沒有任何反應。但是當我寫道：

$('#content').fadeIn(1500);

它隱藏，然後再次顯示。

這裏是CSS

#content 
{ 
    height: 100%; 
    width: 100%; 
}

瀏覽器：Firefox 3.5.3 Linux下的Gentoo

UPD

當我鍵入代碼：

$('#content').hide();

它正確隱藏。

UPD

我已經解決了問題...我不明白，爲什麼有人......剛剛更換jquery.min使用jQuery

來源

2009-10-04 Ockonal

有沒有可能發佈更多代碼或鏈接到演示？ – Levi 2009-10-04 17:15:33

可能不是問題，但你寫了「content」和「conent」：P 你可以分享更多的CSS代碼的div＃內容？ – Yaraher 2009-10-04 17:15:36

是否可以指定更多信息，比如應用於該元素的CSS樣式（如果有）以及您正在使用的瀏覽器版本，以及是否在該頁面上使用jqueryui CSS樣式。 – eulerfx 2009-10-04 17:20:12

如果我理解你的問題，你有兩個問題：內容不會淡入，當你點擊它時，內容不會淡出。

這兩個問題都可能是由包裝和內容div在文檔中出現之前腳本執行引起的。如果您的<script>標記位於文檔的<head>中，則$('#wrapper')將找不到任何內容淡入，$('#content')找不到任何內容以將點擊處理程序附加到該文檔。

最好的解決辦法可能是推遲到該文件被加載，通過使用ready做任何事情：

$(document).ready(function() { 
    $('#wrapper').fadeIn(1500); 
    $('#content').click(function() { 
    $(this).fadeOut(1500); 
    }); 
});

或者你可以把你的<script>標籤後體內<div>標籤。

修復此問題時，內容將淡入，但不會平滑，因爲包裝div最初可見—您在包裝div上有style="display:block"。您需要製作display: none;，以便在加載頁面時隱藏包裝div。

這是一個完整的文件，它的工作原理：

<html> 
<head> 
<style type="text/css"> 
#wrapper 
{ 
    display: none; 
} 

#content 
{ 
    height: 100%; 
    width: 100%; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
    window.alert("Couldn't load jQuery"); 
</script> 
<script> 
$(document).ready(function() { 
    $('#wrapper').fadeIn(1500); 
    $('#content').click(function() { 
    $(this).fadeOut(1500); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="content"> 
    Some text 
    </div> 
</div> 
</body> 
</html>

來源

2009-10-04 18:02:04

我解決了我的問題。我無法複製所有代碼，因爲它太大而且有它自己的依賴。但是我會在你的帖子上回答我的問題。謝謝。 – Ockonal 2009-10-04 18:18:27

你已經寫了$ （'#content'）和fadeIn中的$（'＃conent'）。除此之外，這些效果被稱爲完全相同的方式，並沒有解釋爲什麼它們不能按預期工作。

來源

2009-10-04 17:18:01 WDuffy

對不起，這是我的類型錯誤。 – Ockonal 2009-10-04 17:19:51

Ockonal，我使用您提供的代碼（複製/粘貼）設置了測試，並且在Windows XP Firefox 3.5和IE 8中運行良好，如果有幫助的話。 – WDuffy 2009-10-04 17:37:53

你也在「#wrapper」（jQuery的第1行）中留下一個＃出來。

來源

2009-10-04 17:42:05 David

是的，我無法發佈所有代碼，因爲它太大了。謝謝。 – Ockonal 2009-10-04 17:42:54

它爲我，火狐在OSX。確保你的ID是唯一的，如果你有一個重複它可能無法正常工作。另外，你的style：block是多餘的，默認情況下div是塊。

來源

2009-10-04 18:56:37 DGM

JQuery - div淡入淡出

回答

相關問題