jquery - 淡出div并替换为一个

这个问题可能已经被问过无数次了（我只是找不到）。

我有四个链接，所有链接都对应于它们自己的带有信息的“ div”。我想发生的是（默认情况下显示第一个div），单击第二个链接，第一个淡出，第二个div淡入（在另一个位置）。从某种意义上说，我可以进行淡入/淡出操作，但是它们都只是叠加在一起，并做了一些奇怪的动作。我将不胜感激任何帮助。我已经在jsfiddle上放置了一个测试文件。我的jquery可能也有点麻烦。

http://jsfiddle.net/buScL/

最佳答案

问题是您的衰落效应都试图同时发生。使用回调，您可以更严格地控​​制顺序。请参阅此JS Fiddle或下面的相同代码。为什么在同时发生褪色时是丑陋的？块根据正常流程自然堆叠。当一个人处于淡入淡出的过程中时，它仍然会占用流中的空间。当display:none生效时，它仅在渐变的最后释放该空间。当替换盒褪色时，它将放置在通常应属于的位置下方，直到释放最终空间为止。那是当它以丑陋的方式弹回到顶部时。查看fadeToggle上的jQuery文档，并查看回调部分（fadeIn和fadeOut的工作方式相同）。

<div id="hello"> hello world! </div>
<div id="goodbye"> goodbye world! </div>

Javascript：

 ​$("#hello").click(function(){
        $(this).fadeToggle("slow", function(){
           $("#goodbye").fadeToggle("slow"); //Here is a callback
        });
    });


$("#goodbye").click(function(){
    $(this).fadeToggle("slow", function(){
       $("#hello").fadeToggle("slow") //Here is a callback
    }) ;
});
    ​

CSS：

div{
    width:100px;
    height:100px;
}

#hello{
    background-color:red  ;
}

#goodbye{
    background-color:blue;
    display:none;

}

关于jquery - 淡出div并替换为一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11870636/