折叠效果切换答案

【问题标题】：Collapse effect toggle折叠效果切换
【发布时间】：2018-03-02 18:37:15
【问题描述】：

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

这是脚本。

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

这就是 CSS

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

【问题讨论】：

就用toggle("slow")api.jquery.com/toggle
但我可以放慢切换。我知道功能，但在哪里
$(document).ready(function(){ $("button").click(function(){ $(".collapse").toggle("slow"); }); });

标签： jquery css

【解决方案1】：

您可以将元素的 opacity 与此 CSS 一起使用：

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

【讨论】：

【解决方案2】：

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

CSS

.collapse {
  display: none;
}

检查此fiddle。

【讨论】：