单击Jquery改进.css（）动画

我有这段代码，可以在单击一些图像时制作动画。它将管理

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>

$（文档）.ready（函数（）{
打开面板（）；
关闭_面板（）；
});
//加速
变量body=$（'body'）；
变量panel1=$（“#panel1”）；
变量panel2=$（“#panel2”）；
变量panel3=$（“#panel3”）；
变量panel1link=$（“#panel1链接”）；
变量panel2link=$（“#panel2链接”）；
变量panel3link=$（“#panel3 link”）；
功能关闭_面板（）{
$（'[id=“close panel”]'）。在（'单击'）上，函数（e）{
css（{marginLeft:'-2em'，宽度：0}）；
css（{marginLeft:'-2em'，宽度：0}）；
css（{marginLeft:'-2em'，宽度：0}）；
css（'overflow'，'auto'）；
});
}
功能打开_面板（）{
panel1link.on（'单击'，功能（e）{
e、 预防默认值（）；
css（{marginLeft:0，宽度：“100%”）；
css（'overflow'，'hidden'）；
});
panel2link.on（'单击'，功能（e）{
e、 预防默认值（）；
css（{marginLeft:0，宽度：“100%”）；
css（'overflow'，'hidden'）；
});
panel3link.on（'click'，函数（e）{
e、 预防默认值（）；
css（{marginLeft:0，宽度：“100%”）；
css（'overflow'，'hidden'）；
});
}

在我个人看来，不要在jQuery中这样做，应该使用CSS的@keyframes规则

以下是您将如何执行此操作的示例：

@keyframes animationName {
    from { background-color: red; }
    to { background-color: yellow; }
}

这将创建一个动画，所有这些动画都将背景颜色从红色更改为黄色，但将与任何CSS属性一起使用

在CSS文件中放置@keyframes规则后，可以使用jQuery中的.CSS将动画应用于选定元素

确保指定动画的名称和持续时间

animation-name: animationName;
animation-duration: 4s;

我希望这对你有帮助，如果你不想问我更多的信息的话

---

另外，缩进你的代码，它使它更容易阅读；）

当我问这个不真实的问题时，我没有考虑使用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>

#配电盘1、配电盘2、配电盘3{
身高：100%；
宽度：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
保证金：0；
背景色：#dfab3d；
溢出x：隐藏；
转化：translateX（-100%）；
过渡：所有300毫秒；
}

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>

$（文档）.ready（函数（）{
打开面板（）；
关闭_面板（）；
});
变量body=$（'body'）；
变量panel1link=$（“#panel1链接”）；
变量panel2link=$（“#panel2链接”）；
变量panel3link=$（“#panel3 link”）；
变量panel1=$（“#panel1”）；
变量panel2=$（“#panel2”）；
变量panel3=$（“#panel3”）；
功能关闭_面板（）{
$（'[id=“close panel”]'）。在（'单击'）上，函数（e）{
css（{transform:'translateX（-100%）'）；
css（{transform:'translateX（-100%）'）；
css（{transform:'translateX（-100%）'）；
css（'overflow'，'auto'）；
});
}
功能打开_面板（）{
panel1link.on（'单击'，功能（e）{
e、 预防默认值（）；
css（{transform:'translateX（0%）}）；
css（'overflow'，'hidden'）；
});
panel2link.on（'单击'，功能（e）{
e、 预防默认值（）；
css（{transform:'translateX（0%）}）；
css（'overflow'，'hidden'）；
});
panel3link.on（'click'，函数（e）{
e、 预防默认值（）；
css（{transform:'translateX（0%）}）；
css（'overflow'，'hidden'）；
});
}

我们需要查看样式，因为您只是将新样式应用于JavaScript中的元素，所以转换必须在CSS中。您也应该发布HTML和CSS，以便我们有一个重现问题的工作演示。假设您正在使用

transition

设置这些属性的动画，请尝试转换

transform:translateX（）

而不是边距。@MichaelCoker我会尝试一下。如果我使用

@关键帧

，我可以让

.on（'click'）

启动动画，对吗？是的，只需使用.css（）函数添加动画名称和动画持续时间属性。祝你好运