JQuery - div 褪色问题

发布于 2024-08-06 03:56:56 字数 757 浏览 11 评论 0原文

我有 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

原文

I have div, which has 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

#content
{
    height: 100%;
    width: 100%;
}

Browser: Firefox 3.5.3 under Linux Gentoo

upd

When I type code:

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

It hides correctly.

upd

I've solved problem... I can't understand, why did it was... Just replaced jquery.min with jquery

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

隱形的亼 2024-08-13 03:56:56

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

这两个问题可能是由于您的脚本在包装器和内容 div 出现在文档中之前执行而引起的。如果您的

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

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

或者，您可以将

当您解决此问题时，内容将淡入，但不会平滑，因为包装 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>

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. 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.

The best solution is probably to defer doing anything until the document is loaded, by using 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.

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. You need to make that display: none; instead so that the wrapper div is hidden while the page is loading.

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>

回复收藏 0 原文