JQuery的 - DIV褪色烦恼

StackOverflow https://stackoverflow.com/questions/1516904

  •  19-09-2019
  •  | 
  •  

题

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

浏览器：Firefox 3.5.3 Linux下Gentoo的

<强> UPD

当I型代码：

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

它隐藏正确。

<强> UPD

我已经解决了问题...我不明白，为什么有人......刚刚更换jquery.min使用jQuery

有帮助吗？

解决方案

如果我明白你的问题，你有两个问题：内容不褪色的，而当你点击它，内容不淡出

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

其他提示

这对我的作品，火狐在OSX。请确保您的ID是唯一的，如果你有一个重复它可能无法正常工作。此外，您的风格：块是多余的，div的默认是块

。

您已经写$的淡入在淡出（ '＃内容'）和$（ '＃conent'）。其他的，这个效果被称为完全相同的方式，并提供没有解释他们为什么不能同时按预期工作。

您也留下＃出在 “#wrapper指定”（的jQuery线1）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top