折叠效果切换

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

Answer 2

你可以improve your CSS with elaborated css3 transitions或你可以使用jQuery slideToggle()。

JS

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

CSS

.collapse {
  display: none;
}

检查这个fiddle。