jquery обратная анимация при втором щелчке

Question

Я хотел бы иметь обратную анимацию при втором щелчке, но вторая анимация должна быть противоположной первой, но должна иметь одинаковые движения. Я написал также в 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; 
} 

Answer 1

Просто измените JQuery использовать .toggleClass() которым делает всю вещь для вас пример:

$('.linguait').click(function() { 
    $(this).toggleClass("active"); 
}); 

и установить стандартное (деактивированное) в классе linguait вместо его ow п.

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 { 
    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; 
} 

Answer 2

Обновите JQuery:

$(document).ready(function() { 
    $('.linguait').on('click', function() { 
    var $el = $(this); 
    if ($el.hasClass('active')) { 
     $el.removeClass('active'); 
     $el.addClass('deactive'); 
    } else if ($el.hasClass('deactive')) { 
     $el.removeClass('deactive'); 
    } else { 
     $el.addClass('active'); 
    } 
    }); 
}); 

Использование CSS-анимации:

@keyframes foo { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 

.linguait.active { 
    animation: foo 2s infinite linear; 
} 
.linguait.deactive { 
    animation: foo 2s infinite linear reverse; 
}