本文介绍了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="ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="form">Test</div> <a href="#" id="formButton">Click</a>
更多推荐
CSS淡入淡出onclick
发布评论