Question

当我添加了一个按钮，当点击它时打开内容，内容就会立即弹出。但是我希望添加一个平滑的过渡，内容会轻轻地显示出来。这是我的代码：

<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).toggleClass('hidden show');
});
});
</script>

需要添加什么？

Answer 1

假设所有这些块（除了可能只有一个？）开始关闭，将display：none分配给目标块的css（可能是你的隐藏类所做的）。

由于您已经在使用jQuery，最简单的方法是使用slideToggle（）（http://api.jquery.com/slidetoggle/）或fadeToggle（）（http://api.jquery.com/fadetoggle/），具体取决于您要查找的效果而不是当前toggleClass。

 $(target).slideToggle();

Answer 2

感谢您的想法。事实上，我只是在寻找过渡，所以我决定选择css（因为我猜js越少越好），使用这个：

#cb1 {position: absolute; left: -999em;}
label[for="cb1"] {cursor: pointer;}
#updates {max-height: 0; opacity: 0; overflow: hidden; transition: 1s ease-in-out;}
#cb1:checked~#updates {max-height: 100%; opacity: 1;}

单击按钮时打开内容时平滑过渡

2 个答案: