Question

任何人都可以帮助我在手风琴中整合缓和效果吗？

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

{{1}}

我该如何做到这一点？

提出了JSFIDDLE我的问题。

PS。平稳的缓和效果也可以解决问题。

Answer 1

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

然后尝试 this solution 。

<强> 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个缓动函数 -

swing（默认）
线性

还有更多的缓动功能，但作为外部插件。

截至目前，如果你想要一个平滑的缓和效果，你可以改变milliseconds这样的速度 -

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

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

在Accordion中添加缓动效果

2 个答案: