javascript - Jquery - 如何在 html 元素之间来回转换 (fadeIn/fadeOut) 并保持位置？

Question

$("#firstPageNextArrow").fadeOut(200, function() {
    $("#p2Head").fadeIn("medium", function() {
        $("#p2tip").fadeIn("medium", function (){
            $("#factorInputs").fadeIn("medium", function() {
                $("#addFactor").fadeIn("medium",function() {
                    $("#secondPageBackArrow").fadeIn("medium");
                    $("#secondPageNextArrow").fadeIn("medium");
                });
            });
        });
    });
});

上面是一些代码，展示了我是如何处理事情的。

所以我一直在使用 fadeOut 和 fadeIn 方法在“页面”之间来回转换，或者在技术上只是内部 html 元素。到目前为止一切顺利，但包含 div 的位置不稳定。切入正题:是否有更有效的方法来转换到同时保留定位的新/旧 html 元素？

Answer 1

你必须将它们的位置设置为 absolute 因为当转换开始时，两个 div 都带有 display:block这就是导致 position 问题的原因。

问题

$('button').click(function(){
  $('div').each(function(){
    var elem = $(this);
    if (elem.is(':visible')) {
      elem.fadeOut();
    }
    else {
      elem.fadeIn();
    }
  });
});

div {
  width:100px;
  height:100px;
}

#div1 {
  background:red; 
}

#div2 {
  background:green;  
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1"></div>
<div id="div2"></div>
<button>Toggle</button>

解决方案

$('button').click(function(){
  $('div').each(function(){
    var elem = $(this);
    if (elem.is(':visible')) {
      elem.fadeOut();
    }
    else {
      elem.fadeIn();
    }
  });
});

div {
  width:100px;
  height:100px;
  position:absolute; /* this is the change */
}

#div1 {
  background:red; 
}

#div2 {
  background:green;  
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle</button>
<div id="div1"></div>
<div id="div2"></div>

请记住，您需要注意其余内容。阅读更多关于 position:absolute 的信息