Question

我有div，其id为'content'。它是可见的。

<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%;
}

浏览器：Linux Gentoo下的Firefox 3.5.3

UPD

当我输入代码时：

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

它隐藏得正确。

UPD

我已经解决了问题...我无法理解，为什么会这样...只是用jquery替换了jquery.min

Answer 1

如果我理解你的问题，你有两个问题：内容不会淡入，当你点击它时，内容不会淡出。

这两个问题可能是由于脚本在包装器和内容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>

Answer 2

它适用于我，OSX上的firefox。确保您的ID是唯一的，如果您有重复，它可能无法正常工作。另外，你的样式：块是多余的，默认情况下div是块。

Answer 3

你在fadeOut中写了$（'＃content'），在fadeIn中写了$（'＃conent'）。另外，这种效果被称为完全相同的方式，并没有解释为什么它们都不会按预期工作。

Answer 4

你也在#wrapper中留下#out（jQuery的第1行）。

JQuery - 褪色的麻烦

4 个答案: