javascript - 我应该怎么做才能避免移动网页上的元素(html、css、jQuery)？

Question

我正在学习 jQuery，我写了这样的东西:

$('#bt1').on('click',function() {
    $('#area1').fadeToggle(1000);
});

并且它对一个元素工作正常。当我再添加一个元素并将其放在第一个元素旁边时，当我单击 bt1 时，第二个元素会取代第一个元素，因为第一个元素会消失。

我的问题是:当一个元素被隐藏时，如何将元素 (div) 保持在原位，它们在开始的位置？

Answer 1

使用下面的解决方案而不是 fadeToggle

$('#bt1').on('click',function() {
   $("#area1").animate({opacity:($("#area1").css('opacity')==1)?0:1});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="area1">AREA 1
  </div>

<div id="area2">AREA 2
  </div>

<input type="button" value="submit" id="bt1">