Question

当前实施：

两个div在同一个地方，div1显示：block，div2 display：none
，Jquery在2000ms内隐藏一个并显示其他div。

问题：我不希望用户感觉像在点击标签后加载了第二个div。当第一个div消失时，我希望用户感觉第二个div就在那里。

当前代码：

div1.hide('fade', 2000, function() {
    div2.show();
});

我需要类似的东西：

div2.show(); //behind div1
div1.hide('fade', 2000);

但这会在屏幕上显示divs 2秒，我不想这样做。

请帮忙。

Answer 1

您需要编写类似这样的代码

 $(document).ready(function(e) {
   $(".tab2").on("click",function(){
      $(".div2").stop(true,true).slideUp(function(){
          $(".div1").stop(true,true).slideDown();
       });

   })
  $(".tab1").on("click",function(){
      $(".div1").stop(true,true).slideUp(function(){
        $(".div2").stop(true,true).slideDown();
        });
     })
 });

将您要点击的类或ID名称改为.tab

以下是完整标签页面的演示：fiddle

Answer 2

您可以使用stop()来阻止动画的排队，例如：

$('#click').click(function() {
    $("#div1").stop().fadeTo(2000, 0);
    $("#div2").stop().fadeTo(2000, 1);
});

这是jsFiddle

Answer 3

使用z-index，您正在寻找的内容听起来像2 div一样。你只需将它们放在同一个地方，给后面的一个z-index，然后fadeOut。这样第二个实际上就已存在，您不需要show()或fadeIn()。示例here

Answer 4

这比稍后加载第二个div有点性感。堆叠div，然后淡出顶部，并在动画回调完成后隐藏它。（或者，使用fadeOut作为BenMann建议的相同结果。）

Example fiddle

<div id='container'>
    <div id='divFront'>some content on top, click for other content</div>
    <div id='divBack'><br />some other content underneath</div>
</div>
$('#divFront').click(function(){
    $('#divFront').animate({"opacity":"0"}, 2000, "swing", function(){
      $('#divFront').hide();
    });
});

Answer 5

谢谢你的支持先生，我已经通过使用每个人的评论来放弃它。看看http://jsfiddle.net/bhailogee/CA7Bu/3谢谢

    $(document).ready(function(e) {
    $(".tab1").on("click",function(){
        prepare($(".div2"),$(".div1"));
        $(".div1").hide('slide', 2000,function(){
            clean($(".div2"),$(".div1"));
            $(".div2").show();
        });                
    })
    $(".tab2").on("click",function(){
        prepare($(".div1"),$(".div2"));
         $(".div2").hide('slide', 2000,function(){
            clean($(".div1"),$(".div2"));
            $(".div1").show();
         });
    })

    function prepare(showdiv,hidediv){    
    showdiv.css('position','absolute');
    hidediv.css('position','absolute');
    showdiv.css('z-index','1');
    hidediv.css('z-index','2');
    showdiv.css('display','block');
    hidediv.css('display','block');
}

function clean(showdiv,hidediv){
    showdiv.css('z-index', '');
    hidediv.css('z-index', '');
}
 });

在第一个div后面加载第二个div。然后隐藏第一个div

5 个答案: