jQuery-div淡出麻烦
[英]JQuery - div fading trouble
问题描述
I have div, which has id 'content'. 
我有div，其ID为“ content”。 It's visible. 可见
<div id="wrapper" style="display:block">
<div id="content">
Some text
</div>
</div>
Now I want to fade it out: 现在我想淡出它：
$('#wrapper').fadeIn( 1500 );
$('#content').click(function(){
$(this).fadeOut( 1500 );
});
And nothing happens. 没有任何反应。 But when I wrote: 但是当我写道：
$('#content').fadeIn( 1500 );
It hides and then shows again. 隐藏并再次显示。
Here is css 这是CSS
#content
{
height: 100%;
width: 100%;
}
Browser: Firefox 3.5.3 under Linux Gentoo 浏览器：Linux Gentoo下的Firefox 3.5.3
upd UPD
When I type code: 当我输入代码时：
$('#content').hide();
It hides correctly. 它正确隐藏。
upd UPD
I've solved problem... I can't understand, why did it was... Just replaced jquery.min with jquery 我已经解决了问题...我不明白，为什么呢...只是用jquery替换了jquery.min
4 个解决方案
解决方案1
1 已采纳 2009-10-04 18:02:04
If I understand your question, you have two problems: the content doesn't fade in, and when you click it, the content doesn't fade out. 如果我理解您的问题，则有两个问题：内容不会淡入，并且单击它时内容不会淡出。
Both problems are probably caused by your script executing before the wrapper and content divs have appeared in the document. 这两个问题都可能是由于脚本在包装和内容divs出现在文档中之前执行的。 If your <script> tag is in the <head> of your document, then $('#wrapper') won't find anything to fade in and $('#content') won't find anything to attach a click handler to. 如果您的<script>标记位于文档的<head>中，则$('#wrapper')将找不到任何内容，而$('#content')将不会找到任何内容来附加单击处理程序至。
The best solution is probably to defer doing anything until the document is loaded, by using ready : 最好的解决方案可能是使用ready任何事情推迟到文档载入之前：
$(document).ready(function () {
$('#wrapper').fadeIn(1500);
$('#content').click(function () {
$(this).fadeOut(1500);
});
});
Alternatively you could put your <script> tag after the <div> tags in the body. 或者你可以把你<script>的标记之后 <div>在身上的标签。
When you fix this problem the content will fade in, but it won't be smooth because the wrapper div is initially visible—you have style="display:block" on the wrapper div. 解决此问题后，内容将淡入，但由于包装div最初可见，因此内容将变得不平滑-您在包装div上具有style="display:block" 。 You need to make that display: none; 您需要进行display: none; instead so that the wrapper div is hidden while the page is loading. 而是在页面加载时隐藏包装div。
Here is a complete file which works: 这是一个有效的完整文件：
<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>
解决方案2
1 2009-10-04 18:56:37
It works for me, firefox on OSX. 它对我有用，在OSX上是firefox。 Make sure that your id's are unique, if you have a duplicate it might not work right. 确保您的ID是唯一的，如果重复，则可能无法正常工作。 Also, your style: block is redundant, divs are blocks by default. 另外，您的样式：block是多余的，divs默认是block。
解决方案3
0 2009-10-04 17:18:01
You have wrote $('#content') in the fadeOut and $('#conent') in the fadeIn. 您已经在fadeOut中写入了$（'＃content'），并在fadeIn中写入了$（'＃conent'）。 Other that this the effects are being called exactly the same way and offer no explanation as to why they wouldn't both be working as expected. 除此之外，这种效果的调用方式完全相同，并且没有解释为什么它们都无法按预期方式工作。
解决方案4
0 2009-10-04 17:42:05
您还会在“ #wrapper”（jQuery的第1行）中留下＃号。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.