在显示和隐藏 div 上应用 css 过渡

Question

在下面的代码中，我在单击按钮时切换 div (id=popdiv) 的可见性。 我想给它添加一些过渡效果。 例如，现在它只是弹出并隐藏。 我希望在显示隐藏时过渡有点慢，但没有任何过渡或动画效果起作用。

 $('#pop').click(function(){ $('#popdiv').toggle(); })

 #popdiv{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="background-color: aqua; width: 50%; height: 20%;" > <button id="pop">CLICK</button> </div> <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv"> POPUP </div>

如何实现这一目标？

提前致谢 ！

Answer 1

可以使用-jquery的slideToggle()来实现，如下所示-

$("#pop").click(function(){ $("#popdiv").slideToggle(1000);

});

Answer 2

不要使用toggle()函数。 它只会让您控制它应该显示和隐藏的时间，而不是如何显示和隐藏。

而是使用 JavaScript 和 CSS 的组合。 display属性不能被动画化，因此如果要创建过渡，则不应使用该属性。

而是使用 CSS 中的opacity 、 visibility和transition属性的组合。 作为默认状态，不透明度应为0 ，可见性应hidden ，并且元素应在这两个元素上设置过渡。

现在定义一个 CSS 类，它的 opacity 设置为1 ，并且可见性属性设置为visible 。 这将是您的元素可见的状态。

然后使用 JavaScript，在您的情况下使用 jQuery，在您想要显示或隐藏的元素上切换类。 这可以通过toggleClass()方法完成。

 $('#pop').click(function(){ $('#popdiv').toggleClass('show'); })

 #popdiv { opacity: 0; visibility: hidden; transition: 500ms ease-in-out; transition-property: opacity, visibility; } #popdiv.show { opacity: 1; visibility: visible; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="background-color: aqua; width: 50%; height: 20%;" > <button id="pop">CLICK</button> </div> <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv"> POPUP </div>

Answer 3

您可以使用.animate添加动画

这是我所指的文档： https : //www.w3schools.com/jquery/jquery_animate.asp

对于您的代码，我删除了外部 CSS，更新了您的 jQuery，并向您的弹出式 div 添加了display: none 。

 $('#pop').click(function(){ $('#popdiv').animate({ width: 'toggle' }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="background-color: aqua; width: 50%; height: 20%;" > <button id="pop">CLICK</button> </div> <div style="background-color: cadetblue; width: 30%; height: 40%; display: none;" id="popdiv"> POPUP </div>

Answer 4

其他选项：您可以更改淡入数字和 0.5 秒的过渡。

 $('#pop').click(function(){ $('#popdiv').fadeIn(1000); }) $('#pop2').click(function(){ $('#popdiv2').toggleClass('showHide'); })

 #popdiv{ display:none; } #popdiv2 { opacity: 0; transition: all .5s ease-in-out; } #popdiv2.showHide { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="background-color: aqua; width: 50%; height: 20%;" > <button id="pop">CLICK</button> </div> <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv"> POPUP </div> <br><br><br> <div style="background-color: aqua; width: 50%; height: 20%;" > <button id="pop2">CLICK TWO</button> </div> <div style="background-color: cadetblue; width: 30%; height: 40%;" id="popdiv2"> POPUP TWO </div>