如何取消jQuery中hide/show的盒子动画？实现黑色div平滑消失

嘿，我懂你的需求啦——你希望这个全屏黑色div在隐藏和显示时，只做缓慢的淡入淡出，而不是默认的那种收缩形变动画对吧？

问题出在jQuery的hide("slow")和show("slow")默认行为上：它们会同时修改元素的宽度、高度和透明度，所以你会看到盒子慢慢缩小消失的形变效果。要只保留淡入淡出，我们可以用专门的淡入淡出方法，或者手动控制透明度动画。

方法1：使用fadeOut()和fadeIn()（最直接） #

这两个方法是jQuery专门为淡入淡出效果设计的，只会修改元素的透明度，不会改变宽高，完美符合你的需求：

修改后的完整代码： #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="visible">Visible</button>
<div id="view"></div>

CSS

#view{ 
  height: 100%; 
  width: 100%; 
  position: fixed; 
  background-color: black; 
}

JavaScript

$("#hide").click(function(){ 
  $("#view").fadeOut("slow"); 
}); 

$("#visible").click(function(){ 
  $("#view").fadeIn("slow"); 
});

方法2：手动控制透明度动画（更灵活） #

如果你想更精细地控制动画过程，也可以用animate()方法直接修改opacity属性，动画结束后再设置display属性：

$("#hide").click(function(){ 
  $("#view").animate({opacity: 0}, "slow", function(){
    $(this).css("display", "none");
  }); 
}); 

$("#visible").click(function(){ 
  $("#view").css({opacity: 0, display: "block"}).animate({opacity: 1}, "slow"); 
});

这个方法的好处是，你可以自定义动画时长、添加回调函数做后续操作，而且完全不会有盒子形变的问题。

内容的提问来源于stack exchange，提问作者user9269971