当元素变得可见时添加过渡效果？

Question

我的html中隐藏了一些输入字段，如下所示：

<input type="text" class="hidden" />
<button class="hidden">click me!</button>

通过jquery我以这种方式显示这样的控件：

$('input').removeClass('hidden');

这很好用，但我想在元素变得可见时添加淡入淡出效果。可以通过css这样做吗？那么当元素可见时会自动出现淡入淡出效果吗？

Answer 1

＆＃13;

＆＃13;

$('#show').click(function(){
  $('.hidden').fadeIn(1000).removeClass('hidden');
})

＆＃13;

.hidden{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="hidden" />
<button class="hidden">click me!</button>

<button id='show'>CLICK TO SHOW</button>

＆＃13;

＆＃13;

＆＃13;