jquery - 淡出 div 并替换为一个

Question

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

我有四个链接，它们都对应于它们自己的“div”，其中包含信息。我想要发生的是（默认显示第一个 div），单击第二个链接，第一个淡出，第二个 div 淡入（在另一个的同一位置）。我让淡入/淡出工作（在某种意义上），但他们都只是堆叠起来做一些奇怪的动作。我将不胜感激任何帮助。我在 jsfiddle 上放置了一个测试文件。我的 jquery 可能也有点古怪。

http://jsfiddle.net/buScL/

Answer 1

将绝对位置添加到 div 应该可以解决此问题。您还应该考虑使用类来淡出其他 div。它只是让代码看起来更好。

http://jsfiddle.net/mTKFJ/

Answer 2

给所有的 div 一个类，然后positon:absolute;

这导致它们都在另一个之上，所以当你淡出/淡入时，它发生在同一个地方。

.content {
    position: absolute;
}

演示

Answer 3

您可以使用锚点的文本来选择目标，请尝试以下操作：

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

演示

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

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;

}