CSS淡入淡出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="ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="form">Test</div> <a href="#" id="formButton">Click</a>