Q: jquery - rotate works one time I want to rotate a div i do like this but it works one time i want when it hovers it starts rotating and when mouse leaves it rotates back i do like this but it works one time


<!DOCTYPE html>
<html>
    <head>
        <style>
            #Item{
                width: 150px;
                height: 150px;
                background: #902;
            }
            .box_rotate {
                -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
                -moz-transform: rotate(180degdeg);  /* Firefox 3.5-15 */
                -ms-transform: rotate(180deg);  /* IE 9 */
                -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
                transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
            }
            .box_rotate2 {
                -webkit-transform: rotate(-180deg);  /* Chrome, Safari 3.1+ */
                -moz-transform: rotate(-180degdeg);  /* Firefox 3.5-15 */
                -ms-transform: rotate(-180deg);  /* IE 9 */
                -o-transform: rotate(-180deg);  /* Opera 10.50-12.00 */
                transform: rotate(-180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
            }
            .box_transition {
                -webkit-transition: all 1.5s ease-out;  /* Chrome 1-25, Safari 3.2+ */
                -moz-transition: all 1.5s ease-out;  /* Firefox 4-15 */
                -o-transition: all 1.5s ease-out;  /* Opera 10.50–12.00 */
                transition: all 1.5s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
            }
        </style>
        <script src="jQuery/jquery.js"></script>
        <script>
            $("document").ready(function(){
                function rot(){
                    $(this).addClass('box_rotate box_transition');
                }
                function rot2(){
                    $(this).addClass('box_rotate2 box_transition');
                }
                $("#Item").hover(rot , rot2);
                
            });
        </script>
        
    </head>
    
    <body>
        <div id="Item">
        </div>
    </body>
</html>


I know i should remove classes but i don't know ho to do that here i know .removeclass function but how do I use it

A: You need to remove previous animation class before add new class. Change your js to following.
$("document").ready(function () {
    function rot() {
        $(this).removeClass('box_rotate2 box_transition').addClass('box_rotate box_transition');
    }
    function rot2() {
        $(this).removeClass('box_rotate box_transition').addClass('box_rotate2 box_transition');
    }

    $("#Item").hover(rot, rot2);
});

Full Code


function rot() {
  $(this).removeClass('box_rotate2 box_transition').addClass('box_rotate box_transition');
}

function rot2() {
  $(this).removeClass('box_rotate box_transition').addClass('box_rotate2 box_transition');
}

$("#Item").hover(rot, rot2);
#Item {
  width: 150px;
  height: 150px;
  background: #902;
}

.box_rotate {
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(180degdeg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -o-transform: rotate(180deg);
  /* Opera 10.50-12.00 */
  transform: rotate(180deg);
  /* Firefox 16+, IE 10+, Opera 12.50+ */
}

.box_rotate2 {
  -webkit-transform: rotate(-180deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(-180degdeg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(-180deg);
  /* IE 9 */
  -o-transform: rotate(-180deg);
  /* Opera 10.50-12.00 */
  transform: rotate(-180deg);
  /* Firefox 16+, IE 10+, Opera 12.50+ */
}

.box_transition {
  -webkit-transition: all 1.5s ease-out;
  /* Chrome 1-25, Safari 3.2+ */
  -moz-transition: all 1.5s ease-out;
  /* Firefox 4-15 */
  -o-transition: all 1.5s ease-out;
  /* Opera 10.50–12.00 */
  transition: all 1.5s ease-out;
  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Item"></div>


