[英]Add easing to jquery function
How can I make this jQuery function a smooth transition (adjust height smoothly)? 如何使此jQuery函数平滑过渡(平滑调整高度)?
I'm not sure where to add it in. 我不确定在哪里添加它。
jQuery('#my-button').click(function() {
if (jQuery('#my-button').height() < 100) {
jQuery('#my-button').css("height","auto");
}
else {
jQuery('#my-button').css("height","56px");
}
});
I have tried using animate() but it won't work on 'auto'. 我尝试使用animate(),但在'auto'上不起作用。
I can't use a fixed height as it needs to be text responsive for other devices. 我不能使用固定高度,因为它需要对其他设备进行文本响应。
You can use CSS transitions and then just your same code should work as it is. 您可以使用CSS转换,然后只使用相同的代码即可。
CSS Transition
CSS过渡
transition: delay duration property timing-function;
过渡:延迟持续时间属性计时功能;
The transition-timing-function property specifies the speed curve of the transition effect and can have the following values: transition-timing-function属性指定过渡效果的速度曲线,并可以具有以下值:
jQuery('#my-button').click(function(){ if (jQuery('#my-button').height() < 100) { jQuery('#my-button').css("height","auto"); } else{ jQuery('#my-button').css("height","56px"); } });
#my-button{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; -ms-transition: all 500ms linear; transition: all 500ms linear; border: 1px solid #ccc; width: 200px; height:200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="my-button">Hello Button</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.