Question

我有一系列位置绝对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完成后开始。任何想法？

Answer 1

您检查过这个网站： http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

？这是一个很好的jQuery插件： http://malsup.com/jquery/cycle/

Answer 2

我刚刚尝试了这个例子，并且在IE6中同时使用了fadeIn和fadeOut：

<!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中显示为none而不是在css文件中，或者通过jquery有时会导致问题。尝试给每个div一个displaynone类而不是设置他们的样式标记。希望这有助于祝你好运！

Answer 3

您是否尝试编写自己的动画来实现淡入淡出，而不是使用提供的默认值。我不知道它会更好，但值得一试。

http://docs.jquery.com/Effects/animate

JQuery - IE6 - 如何同时FadeOut和FadeIn？

3 个答案: