javascript jquery隐藏带有CSS过渡效果的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30290861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery hide div with CSS transition effect
提问by innovation
I have one question about CSS hide transition using jquery hide function.
我有一个关于使用 jquery 隐藏功能的 CSS 隐藏转换的问题。
I have created this DEMOfrom codepen.io
我从 codepen.io创建了这个DEMO
In this demo you can see the show button. When you click the show button then .testand .user-imagediv opening with CSS transition effect .
在这个演示中，您可以看到显示按钮。当您单击“显示”按钮.test并.user-image使用 CSS 过渡效果打开 div 时。
I want to make it when clicked hide button then the .testdiv hide with CSS transition effect.
我想在点击隐藏按钮时制作它，然后.test用 CSS 过渡效果隐藏 div。
Anyone can tell me a little example how can i do that ?
任何人都可以告诉我一个小例子我该怎么做？
CSS
CSS
<div class="container">
<div class="usr">Show</div>
<div class="test">
<div class="hide">Hide</div>
<div class="user-image" style="background-image:url(...);"></div>
</div>
</div>
JS
JS
$(document).ready(function() {
$('.usr').click(function() {
$(".test").show();
});
$(".hide").click(function() {
$(".test").hide();
});
});
采纳答案by connexo
If you insist on using jQuery, that's very easy to achieve as well. Define the styles to transition to when showing in a separate css class .show. Add transition-duration: 0.5s;to .test.
如果您坚持使用 jQuery，那也很容易实现。定义在单独的 css 类中显示时要转换到的样式.show。添加transition-duration: 0.5s;到.test.
Then
然后
$(document).ready(function() {
$('.showHideToggle').click(function() {
var toggle= $(this);
if ($(".test").hasClass("show")) {
toggle.text("Hide");
$(".test").removeClass("show");
}
else {
toggle.text("Show");
$(".test").addClass("show");
}
});
});
回答by connexo
You don't need jQuery for this at all. Check this example:
你根本不需要jQuery。检查这个例子：
http://codepen.io/anon/pen/JdKWWW
http://codepen.io/anon/pen/JdKWWW
.hide-show-element {
background-color: #eee;
height: 400px;
position: relative;
text-align: center;
width: 400px;
}
.hide-show-element input[type='checkbox'] {
display: none;
}
.hide-show-element label {
background-color: #a00;
border: 1px solid #111;
color: #fff;
display: block;
text-align: center;
transition-duration: 0.4s;
}
.hide-show-element label:after {
display: block;
content: "Show";
}
.hide-show-element input:checked + label {
background-color: #fff;
border: 1px solid #a00;
color: #a00;
}
.hide-show-element input:checked + label:after {
content: "Hide";
}
.test1 {
opacity: 0;
position: relative;
height: 0;
top: 20%;
transition-duration: 0.4s;
width: 0;
}
.hide-show-element input:checked ~ .test1 {
opacity: 1;
height: 200px;
width: 200px;
}<div class="hide-show-element">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<img class="test1" src="http://lorempixel.com/200/200" />
</div>回答by Senad Me?kin
$('#id-of-your-div').fadeOut(); //fade out
$('#id-of-your-div').fadeIn(); //fade in div
check documentation for more info.
查看文档以获取更多信息。
回答by Dylan Watt
Assuming you are actually talking about literal css transitions, toggle a class on and off. If you want it to fade out then display none, you'll need to use a timeout of the length of your animation that sets to display none at the end. There's no way to keyframe with transitions.
假设您实际上是在谈论文字 css 转换，请打开和关闭类。如果您希望它淡出然后不显示，则需要使用动画长度的超时设置为最后不显示。没有办法用过渡设置关键帧。
$(document).ready(function() {
$('.usr').click(function() {
$(".test").css('display','block').removeClass('hidden');
});
$(".hide").click(function() {
$(".test").addClass('hidden');
setTimeout(function(){
$(".test").css('display','none')}, 500 //Animation Time
)
});
});
--
——
.test{
opacity:1;
transition:500ms cubic-bezier(0,0,0.58,1);
-webkit-transition:500ms cubic-bezier(0,0,0.58,1);
}
.hidden{
opacity:0;
}
