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淡入淡出

回答

相关问题