旋转工作一次

rotate works one time

本文关键字：一次 工作 旋转      更新时间：2023-09-26

我想旋转一个div，我这样做，但它工作一次，我希望当它悬停时它开始旋转，当鼠标离开它旋转回来时，我确实喜欢这个，但它工作一次

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

我知道我应该删除类，但我不知道在这里这样做，我知道 .removeclass 函数，但我如何使用它

在

添加新类之前，您需要删除以前的动画类。 将js更改为关注。

$("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);
});

完整代码

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>

相关文章：