在手风琴中添加缓音效果

Question

谁能帮助我在手风琴中融入轻松的效果？

我想用JQuery模仿这种效果（可以在CSS中设置）：

  -webkit-transition: max-height 500ms ease, padding 500ms ease;
  transition: max-height 500ms ease, padding 500ms ease;

我该怎么做？

对我的问题做了一个JSFIDDLE 。

PS。 具有平滑的缓动效果也可以解决问题。

Answer 1

如果我对它的理解正确，那么您想通过使用transition属性在纯CSS中复制slideDown()来复制jQuery的slideDown()和slideUp() 。

然后尝试此解决方案 。

CSS：

h3 {
    display: block;
    background-color: pink;
    color: #fff;
    padding: 20px;
    margin-bottom: 0px;
}
.accordion__content {
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    overflow: hidden;
    padding: 0;
    max-height: 0;
    transition: max-height 300ms ease-in-out, padding 300ms ease-in-out;
}
.accordion__content--displayed {
    max-height: 100px;
    padding: 20px;
    transition: all 300ms ease-in-out;
}

JavaScript：

$(function () {
    $('.accordion h3').click(function () {
        $(this).next('.accordion__content').toggleClass('accordion__content--displayed');
    });
});

希望这可以帮助。

Answer 2

默认情况下，jQuery的slideUp()提供2个缓动函数-

• 摆动（默认）
• 线性的

除了作为外部插件之外，还有更多可用的缓动功能。

到目前为止，如果您想要平滑的缓动效果，可以像这样以milliseconds更改速度-

$(this).next(".accordion__content").slideToggle(500).siblings(".pane:visible").slideUp();

检查此链接 ，jQuery UI提供了许多缓动功能