CSS淡入淡出onclick [英] CSS fadein fadeout onclick
本文介绍了CSS淡入淡出onclick的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在使用toggle()
显示/隐藏的div上使用CSS动画.
I am trying to use CSS animations on a div which is shown/hidden using toggle()
.
我在动画上添加了ease-in-out
,但是它只是淡入而不会淡出.
I have added ease-in-out
on my animation but it only fades in and will not fade out.
这是我的CSS:
#form {
display: none;
animation: formFade 2s ease-in-out;
-moz-animation: formFade 2s ease-in-out; /* Firefox */
-webkit-animation: formFade 2s ease-in-out; /* Safari and Chrome */
-o-animation: formFade 2s ease-in-out; /* Opera */
}
@keyframes formFade {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes formFade { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes formFade { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes formFade { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
这是html/js:
<form id="form" >
TEST
</form>
<script>
$('#formButton').on('click', function() {
$("#form").toggle();
});
</script>
它淡入onclick
,但不淡出.有什么想法吗?
It fades in onclick
but doesn't fade out. Any ideas why?
推荐答案
使用.toggle()
隐藏元素只是将其设置为display: none
而不会影响不透明度.试试这个:
Using .toggle()
to hide an element just sets it to display: none
without affecting the opacity. Try this:
$('#formButton').on('click', function() {
if ($('#form').css('opacity') == 0) $('#form').css('opacity', 1);
else $('#form').css('opacity', 0);
});
#form {
opacity: 0;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form">Test</div>
<a href="#" id="formButton">Click</a>
这篇关于CSS淡入淡出onclick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文