jquery - 折叠效果切换

Question

我有一个用于导航栏的小切换脚本。如何添加动画效果？

这是脚本。

$(document).ready(function(){
    $("button").click(function(){
        $(".collapse").toggleClass(".collapse in");
    });
});

这是CSS

.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}

Answer 1

您可以在这个 CSS 中使用元素的 opacity:

.collapse {
    opacity:0;
    transition: opacity 1s linear;
}
.collapse.in {
    opacity:1;
}

参见 this JSFiddle