[英]Add Easing effect within Accordion
Can anyone help me intergrate an easing effect within my Accordion? 谁能帮助我在手风琴中融入轻松的效果?
What I want is to mimic this effect (which can be set in your CSS) with JQuery: 我想用JQuery模仿这种效果(可以在CSS中设置):
-webkit-transition: max-height 500ms ease, padding 500ms ease;
transition: max-height 500ms ease, padding 500ms ease;
How can I accomplish this? 我该怎么做?
Made a JSFIDDLE of my problem. 对我的问题做了一个JSFIDDLE 。
PS. PS。 Having a smooth easing effect would also do the trick.
具有平滑的缓动效果也可以解决问题。
If I understand it correctly, you want to replicate what slideDown()
and slideUp()
of jQuery by doing them in pure CSS with the use of transition
property. 如果我对它的理解正确,那么您想通过使用
transition
属性在纯CSS中复制slideDown()
来复制jQuery的slideDown()
和slideUp()
。
Then try this solution out. 然后尝试此解决方案 。
CSS: 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: JavaScript:
$(function () {
$('.accordion h3').click(function () {
$(this).next('.accordion__content').toggleClass('accordion__content--displayed');
});
});
Hope this helps. 希望这可以帮助。
By default, jQuery's slideUp()
provides 2 easing functions - 默认情况下,jQuery的
slideUp()
提供2个缓动函数-
There are many more easing functions available but as external plugins. 除了作为外部插件之外,还有更多可用的缓动功能。
As of now, if you want a smooth easing effect, you can change the speed in milliseconds
like this - 到目前为止,如果您想要平滑的缓动效果,可以像这样以
milliseconds
更改速度-
$(this).next(".accordion__content").slideToggle(500).siblings(".pane:visible").slideUp();
Check this link , jQuery UI provides many easing functions 检查此链接 ,jQuery UI提供了许多缓动功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.