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

【问题标题】：Loading second div behind first div. then hiding first div在第一个 div 后面加载第二个 div。然后隐藏第一个 div
【发布时间】：2014-01-04 18:40:53
【问题描述】：

当前实施：

两个div在同一个地方，div1 display:block, div2 display:none
点击tab时，jquery在2000ms内隐藏一个div，显示其他div。

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

当前代码：

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

我需要类似的东西：

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

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

请帮忙。

【问题讨论】：

CSS 样式 display:none 删除元素 - 你想要的是可见性：隐藏。元素上的可见性和显示之间的区别在于可见性将对象保持在其物理空间中。

标签： javascript jquery html css

【解决方案1】：

你可以使用stop()来阻止动画的排队，像这样：

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

这是jsFiddle

【讨论】：

【解决方案2】：

使用z-index，您正在寻找的内容听起来像是 2 个 div 彼此落后。您只需将它们放在同一个位置，给后面的一个较低的 z-index，然后 fadeOut 顶部的一个。这样，第二个实际上已经存在并且您不需要show() 或fadeIn()。示例here

【讨论】：

【解决方案3】：

你需要编写这样的代码

 $(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

【讨论】：

我认为这不是我要找的...当它在标签上单击两次时它会停止动画。看看jsfiddle.net/bhailogee/CA7Bu/2。它在第一个 div 消失后显示第二个 div。我需要像已经存在的第二个 div 一样显示它。我们刚刚通过滑动删除了第一个 div。
感谢您的支持先生，我已经通过使用每个人的cmets来获得它。看看兄弟jsfiddle.net/bhailogee/CA7Bu/3谢谢

【解决方案4】：

这比稍后加载第二个 div 更性感一点。堆叠 div，然后淡出顶部的 div，并在完成后使用动画回调将其隐藏。（或者，按照 BenMann 的建议使用 fadeOut 以获得相同的结果。）

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

【讨论】：

【解决方案5】：

感谢您的支持先生，我已经通过使用每个人的cmets来获得它。看看兄弟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', '');
}
 });

【讨论】：