JQuery - IE6 - 如何同时淡出和淡入？

发布于 2024-08-18 01:36:43 字数 456 浏览 4 评论 0原文

我有一个绝对位置 div 序列，假设

<div>...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>

我使用 jQuery 编写了一个简单的幻灯片代码，

currentDiv.fadeOut('slow');
nextDiv.fadeIn('slow');

它在 FF/Chrome/Safari/IE7/IE8 中完美运行，但在 IE6 中不起作用。我发现在IE6中，fadeOut和fadeIn不像其他浏览器那样同时发生，fadeIn总是在fadeOut完成后开始。有什么想法吗？

原文

I have a sequence of position absolute div, say

<div>...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>

I wrote a simple slide code using jQuery

currentDiv.fadeOut('slow');
nextDiv.fadeIn('slow');

It works perfectly in FF/Chrome/Safari/IE7/IE8, but not in IE6. I found in IE6, fadeOut and fadeIn not occur simultaneously as in other browsers, fadeIn always begin after fadeOut is completed. any ideas?

分享到QQ

分享到微博

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

发布评论

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

脱离于你 2024-08-25 01:36:44

我刚刚尝试了这个示例，淡入和淡出在 IE6 中同时工作：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
    $(document).ready(function(){

      $(document.body).click(function () {
        $("div#one").fadeOut("slow");
        $("div#two").fadeIn("slow");

      });

    });
</script>
<style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
    height:80px; float:left; }
  div#one { background:#f00; display:block;}
  div#two { background:#0f0; }
  div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

我修改了示例： http://docs.jquery.com/Effects/animate#paramsoptions

我之前注意到，在实际的 div 中而不是在 css 文件中或通过 jquery 将样式显示设置为 none 有时会导致问题。尝试只给每个 div 一个 displaynone 类，而不是设置它们的样式标签。希望这有帮助，祝你好运！

I just tried this example and both a fadeIn and fadeOut work at the same time in IE6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
    $(document).ready(function(){

      $(document.body).click(function () {
        $("div#one").fadeOut("slow");
        $("div#two").fadeIn("slow");

      });

    });
</script>
<style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
    height:80px; float:left; }
  div#one { background:#f00; display:block;}
  div#two { background:#0f0; }
  div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

I modified the example from: http://docs.jquery.com/Effects/animate#paramsoptions

I've noticed before that setting the styles display to none in the actual div instead of in the css file or via jquery can sometimes cause issues. Try just giving each div a class of displaynone instead of setting their style tag. Hopefully this helps and good luck!

回复收藏 0 原文