Question

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

这就是我所拥有的：

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

我认为这应该可以正常工作，但我不知道为什么悬停功能不会超过一次。

抱歉我的英文不好，谢谢。

Answer 1

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

＆＃13;

.cartman {
  transition: all 1s;
}

＆＃13;

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

＆＃13;

使用JQuery旋转和移动不起作用

1 个答案: