jQuery在单击时改进.css（）动画

Question

I have this code to make an animation when some images are clicked. It will manage the css properties to hide or show the selected contents. I've noticed that the animation is not smooth as I expected. Is there a way to improve this code?

<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>

Answer 1

In my personal opinion, instead of doing it in jQuery like this, you should use CSS's @keyframes rule.

Here is an example of how you would do this:

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

This creates an animation that all change the background color from red to yellow, but will work with any CSS property.

Once you put an @keyframes rule in your CSS file, you can apply the animation to your selected element using the .css in jQuery.

Make sure to specify the name of your animation, and the duration.

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

I hope this helps, if not feel free to ask me for more information!

PS Indent your code, it makes it a million times easier to read ;)

Answer 2

When I was asking for this not real issue, I was not considering the possibility to achieve a smooth animation using the CSS rules. After reading the suggestions in the comments and the answer to this question, I've found a solution that is working nice. here is how i changed the code:

CSS code:

<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 code:

<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>