Question

这可能已被多次询问（我找不到它）。

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

http://jsfiddle.net/buScL/

Answer 1

为div添加绝对位置应该解决这个问题。你还应该考虑使用class来淡出其他div。它只是让代码看起来更好。

http://jsfiddle.net/mTKFJ/

Answer 2

将所有div分类为一个类，然后positon:absolute;

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

.content {
    position: absolute;
}

DEMO

Answer 3

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

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

DEMO

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(); }) });

Working sample

注意

在这里，您必须在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;

}

淡出div并替换为一个

5 个答案:

Working sample

注意