我应该怎么做才能避免在网页上移动元素(html、css、jQuery）

what should i do to avoid moving element on web page(html,css,jQuery)?

本文关键字：html 元素 css jQuery 移动 能避免 网页 我应该      更新时间：2023-09-26

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

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

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

我的问题是：当一个元素被隐藏时，如何将元素（div）保持在适当的位置，它们在开始的位置

使用以下解决方案而不是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">

另一个解决方案是切换可见性并将元素保留在DOM中，因为淡出会完全删除在页面中留下间隙的元素

instead of .fadeIn() you can .animate({opacity:1})
and instead of .fadeOut() you can .animate({opacity:0})

然后，如果您想禁用隐藏控件上的点击事件，请调用此方法

$('#YourElementId').css({visibility: "hidden"});
相关文章：