0

我有 div，它的 id 为“内容”。它是可见的。

<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

更新

当我输入代码时：

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

它隐藏正确。

更新

我已经解决了问题...我不明白，为什么会这样...只是用 jquery 替换了 jquery.min

4

4 回答 4

1

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

这两个问题可能是由于您的脚本在包装器和内容 div 出现在文档中之前执行的。如果您的<script>标签在<head>您的文档中，那么$('#wrapper')将找不到任何可以淡入的内容，$('#content')也不会找到任何可以附加点击处理程序的内容。

最好的解决方案可能是推迟执行任何操作，直到加载文档，方法是使用ready：

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

或者，您可以将标签放在正文中的<script>标签之后。<div>

当你解决这个问题时，内容会淡入，但它不会是平滑的，因为包装器 div 最初是可见的——你style="display:block"在包装器 div 上。您需要这样做，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-04T18:02:04.060 回答
1

它适用于我，OSX 上的 Firefox。确保您的 id 是唯一的，如果您有重复，它可能无法正常工作。此外，您的 style: block 是多余的，默认情况下 div 是块。

于 2009-10-04T18:56:37.787 回答
0

您在fadeOut 中写入了$('#content')，在fadeIn 中写入了$('#conent')。除此之外，这些效果的调用方式完全相同，并且没有解释为什么它们不能按预期工作。

于 2009-10-04T17:18:01.620 回答
0

您还在“#wrapper”（jQuery 的第 1 行）中留下了一个 # 。

于 2009-10-04T17:42:05.513 回答