第二次单击时jquery反向动画(jquery reverse animation on second click)

 我想在第二次点击时有一个反向动画，但第二个动画必须与第一个相反，但必须有相同的动画。 我也在jquery写道，因为我希望在点击后对象保持在该位置，直到我再次点击。 
 
 我希望你明白我的意思。 万分感谢！ 
 
 JavaScript的： 
 
$('.linguait').click(function() {
    if (('.linguait').hasClass('active')) {
        $('.linguait').removeClass('active');
        $('.linguait').addClass('deactive');  
     } else{
        $('.linguait').removeClass('deactive');
        $('.linguait').addClass('active');
     }
 });
 
 CSS： 
 
linguait.active {
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

.linguait.deactive {
    right:5%;
    margin-right: -2px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

I would like to have a reverse animation on second click, but the second animation must be the opposite of the first but must have the same moviments. I wrote also in jquery because I want that after click the object stays in the position until I click again.
 
I hope you understand what I mean. Thank you a lot!
 
JavaScript:
 
$('.linguait').click(function() {
    if (('.linguait').hasClass('active')) {
        $('.linguait').removeClass('active');
        $('.linguait').addClass('deactive');  
     } else{
        $('.linguait').removeClass('deactive');
        $('.linguait').addClass('active');
     }
 });
 
CSS:
 
linguait.active {
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

.linguait.deactive {
    right:5%;
    margin-right: -2px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s;
}

原文：https://stackoverflow.com/questions/34903414