在JQuery不工作的情况下旋转和移动

Rotate and move with JQuery not working

本文关键字：旋转 移动 情况下 JQuery 工作      更新时间：2023-09-26

我需要同时旋转和移动图像，实际上只工作一次，但然后只是移动而不是旋转。

这就是我所拥有的：

<!Doctype html>
<html>
<head>
  <meta charset ="utf-8">
  <title>JQuery Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
     $(document).ready(MyMain);
      function MyMain(){ 
        $(".cartman").hover(MoveCartman,Normal);   //on hover Eric  Cartman
        var v1=100;   //variable to move Cartman
        function MoveCartman(){
          $(this).attr("src","CartmanNude.png");
          $(this).css({
            "margin-top":v1+"px",
            "transform":"rotateZ(-360deg)",
            "transition":"1s"
           });
          if (v1<200){v1+=100;}
          else {v1=0;}
        }
        function Normal(){
          $(this).attr("src","CartmanNormal.png");
        }
        }
  </script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div style="padding:0px">
        <img class="img-responsive cartman" src="CartmanNormal.png">
      </div>
    </div>
  </div>
</body>
</html>

我认为这应该可以很好地工作，但我不知道为什么悬停功能不能工作超过1次。

抱歉我英语不好，谢谢。

尝试在doctype声明中将小写d替换为D，在持续时间之前将all添加到transition值；css "margin-top": "0px"、"transform": "rotateZ(0deg)"至Normal功能

.cartman {
  transition: all 1s;
}
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JQuery Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
    $(document).ready(MyMain);
    function MyMain() {
      $(".cartman").hover(MoveCartman, Normal); //on hover Eric  Cartman
      var v1 = 100; //variable to move Cartman
      function MoveCartman() {
        $(this).attr("src", "http://lorempixel.com/100/100/cats");
        $(this).css({
          "margin-top": v1 + "px",
          "transform": "rotateZ(-360deg)"
        });
        if (v1 < 200) {
          v1 += 100;
        } else {
          v1 = 0;
        }
      }
      function Normal() {
        $(this).attr("src", "http://lorempixel.com/100/100/technics")
          .css({
            "margin-top": "0px",
            "transform": "rotateZ(0deg)"
          });
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div style="padding:0px">
        <img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
      </div>
    </div>
  </div>
</body>
</html>

相关文章：