调用jquery fadeout函数，怎么保持下面的按钮位置不变，如例子

Question

http://www.runoob.com/try/try.php?filename=tryjquery_eff_fadeout_fadein

Answer 1

方法一

外面包个固定调试的元素

<div style="height: 50px; overflow: hidden">
    <p>This is a paragraph.</p>
</div>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

方法二，改点代码

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").fadeOut({
        complete: function() {
            $(this).css("visibility", "hidden").show();
        }
    })
  });
  $(".btn2").click(function(){
    $("p").hide().css("visibility", "visible").fadeIn();
  });
});

Answer 2

可以在p外面包一层固定高度的~

Answer 3

首先你要知道fadeOut的结果是元素变为display: none，此时该元素脱离文档流，在布局中不占位置，因此下面的按钮会跑。

要解决这一点，有两种做法：

1. 不要让元素变成display: none。换句话说，不要使用fadeOut方法。如果你只是想让元素变得看不见，可以使用animate({opacity: 0})来将元素的透明度渐变为0。
   但是这样做有一个缺点。由于它只是变得看不见，实际上仍然在原来的地方，因此你还是可以点击它。比如如果它是个链接，你点击它仍然会引发跳转。而fadeOut就不会这样。

2. 为了避免方法1中的弊端，还有一种替代方法。仍然使用fadeOut方法，这样元素会脱离文档流，你看不到它，也无法点击。这时用一个大小与原来的元素相同的新元素放在原来元素所在的位置，就可以保持按钮的位置了。

两种方法各有利弊，重要的在于你是否理解fadeOut方法的实现，以及一些CSS的知识。