Jquery在点击时改进.css()动画
Jquery在点击时改进.css()动画
提问于 2018-07-22 02:07:07
我有这个代码来制作动画时，一些图像被点击。它将管理css属性以隐藏或显示所选内容。我注意到动画并不像我预想的那样流畅。有没有办法改进这段代码？
<script>
$(document).ready(function(){
open_panels();
close_panels();
});
// speed up
var body = $('body');
var panel1 = $('#panel1');
var panel2 = $('#panel2');
var panel3 = $('#panel3');
var panel1link = $('#panel1-link');
var panel2link = $('#panel2-link');
var panel3link = $('#panel3-link');
function close_panels(){
$('[id="close-panel"]').on('click',function(e){
panel1.css({marginLeft:'-2em',width:0});
panel2.css({marginLeft:'-2em',width:0});
panel3.css({marginLeft:'-2em',width:0});
body.css('overflow','auto');
});
}
function open_panels(){
panel1link.on('click',function(e){
e.preventDefault();
panel1.css({marginLeft:0,width:"100%"});
body.css('overflow','hidden');
});
panel2link.on('click',function(e){
e.preventDefault();
panel2.css({marginLeft:0,width:"100%"});
body.css('overflow','hidden');
});
panel3link.on('click',function(e){
e.preventDefault();
panel3.css({marginLeft:0,width:"100%"});
body.css('overflow','hidden');
});
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-22 18:15:38
当我问这个不真实的问题时，我没有考虑到使用CSS规则实现平滑动画的可能性。在阅读了评论中的建议和这个问题的答案后，我找到了一个很好的解决方案。下面是我是如何修改代码的：
CSS代码：
<style>
#panel1,#panel2,#panel3 {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
margin: 0;
background-color: #dfab3d;
overflow-x: hidden;
transform: translateX(-100%);
transition: all 300ms;
}
</style>Jquery代码：
<script>
$(document).ready(function(){
open_panels();
close_panels();
});
var body = $('body');
var panel1link = $('#panel1-link');
var panel2link = $('#panel2-link');
var panel3link = $('#panel3-link');
var panel1 = $('#panel1');
var panel2 = $('#panel2');
var panel3 = $('#panel3');
function close_panels(){
$('[id="close-panel"]').on('click',function(e){
panel1.css({transform: 'translateX(-100%)'});
panel2.css({transform: 'translateX(-100%)'});
panel3.css({transform: 'translateX(-100%)'});
body.css('overflow','auto');
});
}
function open_panels(){
panel1link.on('click',function(e){
e.preventDefault();
panel1.css({transform: 'translateX(0%)'});
body.css('overflow','hidden');
});
panel2link.on('click',function(e){
e.preventDefault();
panel2.css({transform: 'translateX(0%)'});
body.css('overflow','hidden');
});
panel3link.on('click',function(e){
e.preventDefault();
panel3.css({transform: 'translateX(0%)'});
body.css('overflow','hidden');
});
}
</script>Stack Overflow用户
发布于 2018-07-22 02:17:37
在我个人看来，与其在jQuery中这样做，不如使用CSS的@keyframes规则。
下面是一个如何做到这一点的示例：
@keyframes animationName {
from { background-color: red; }
to { background-color: yellow; }
}这将创建一个将背景颜色从红色更改为黄色的动画，但可以使用任何CSS属性。
在CSS文件中添加@keyframes规则后，就可以使用jQuery中的.css将动画应用于所选元素。
确保指定动画的名称和持续时间。
animation-name: animationName;
animation-duration: 4s;我希望这对你有所帮助，如果你不能随时向我询问更多的信息！
另外，缩进你的代码，它会让你的代码更容易阅读。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51458782
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号