淡出div并用一个替换

Question

这个问题可能已经被问了很多次（我只是找不到它）。

我有四个链接，它们各自对应着一个“div”里面的信息。我想要发生的事情是（第一个div默认显示），点击第二个链接，第一个div淡出，第二个div淡入（在同一位置）。我已经实现了淡入/淡出效果（在某种程度上），但它们都只是堆叠起来并进行奇怪的运动。我将测试文件放在了jsfiddle上。我的jquery也可能有点问题。

http://jsfiddle.net/buScL/

- Louis Stephens

Answer 1

给div添加绝对定位应该可以解决这个问题。您还应该考虑使用类来淡化其他的div，这只是让代码看起来更好而已。

http://jsfiddle.net/mTKFJ/

- Pit Digger

Answer 2

给所有的div添加一个类，然后使用position:absolute; 这会使它们全部叠在一起，因此当你淡入/淡出时，它们会发生在同一个位置。

.content {
    position: absolute;
}

演示

- sachleen

Answer 3

您可以使用锚点文本选择目标，尝试以下方法：

  $("#controlls a").click(function () {
      var id = $(this).text().toLowerCase().replace(' ', "")
      $('#'+id).fadeIn().siblings('div').fadeOut()
  });

演示

- Ram

---

那根本没有解决问题。 - sachleen

Answer 4

将您的HTML更改如下：

HTML

<div id="wrapper">

  <ul id="controlls">  
      <li><a href="#" id="one" class="dealer">Dealer</a></li>
      <li><a href="#" id="two" class="advertise">Advertise</a></li>
      <li><a href="#" id="three" class="social">Social Media</a></li>
      <li><a href="#" id="four" class="need">Need</a></li>
  </ul>

  <div id="slider">
        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>

使用以下jQuery代码：

jQuery

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('class'); // get class of clicked anchor tag
    // first fadeOut the visible div
    $('#slider div:visible').fadeOut(500, function() {
        // after fadeOut complete show target div
        $('div#' + id).fadeIn();
    })
});

工作示例

注意

在这里，您必须将fadeIn()放在fadeOut()回调函数内部，以便fadeIn()会在fadeOut()之后立即发生。

- thecodeparadox

Answer 5

问题在于您的淡入淡出效果都试图同时发生。使用回调函数，您可以更严格地控制顺序。请参见此JS Fiddle或下面相同的代码。为什么会出现丑陋的情况？块按照正常流自然堆叠。当一个块正在淡出过程中，它仍然占据着流中的空间。只有在淡出的最后一刻，display:none生效时，它才释放该空间。当替换框淡入时，它被定位到通常所属的下方，直到最终空间释放。那时它以一种丑陋的方式弹回到顶部。查看jQuery关于fadeToggle的文档，并查看回调部分（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;

}

- AlexMA