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

Question

当前实现:

1. 两个div在同一个地方，div1 display:block, div2 display:none

2. 在选项卡点击时，Jquery 在 2000 毫秒内隐藏一个并显示另一个 div。

问题:我不希望用户在单击选项卡后感觉像是加载了第二个 div。我希望用户在第一个 div 消失时感觉到第二个 div 在那里。

当前代码:

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

我需要这样的东西:

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

但这两个 div 都在屏幕上显示了 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上

这是完整选项卡 Pane 的演示:fiddle