JQuery - 如何向前和向后旋转元素一次？

Question

也许答案很简单，但我发现的每个解决方案都有无限旋转或一次旋转。我想要做的是将元素向前旋转，然后向后旋转到原始位置，按下按钮触发。

这是我正在制作的小游戏的一部分，这里是JSFiddle。它向上旋转，但我希望div旋转回原始位置：

$(function () {
    $('#button').click(function() {
        swingArm();
    });

});

function swingArm() {
    $rollingPin = $('#rolling-pin');
    $({ deg: 0 }).animate({ deg: 50 }, {
        duration: 400,
        step: function (now) {

            $rollingPin.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

https://jsfiddle.net/cw4bj3tf/

我怎样才能做到这一点？

Answer 1

使用此方法，您只需使用CSS3动画和jQuery的切换类来触发它。这是一个更简单的方法，允许您指定关键帧。我将它设置为默认只是一个摆动，但你可以很容易地将它抬起并摆动它，就像他心烦意乱一样。希望这有帮助！

编辑：我将其更改为使用并从样式中删除。这现在每次点击事件都有效。您可以在或函数中指定以ms为单位的时间，或者默认为500毫秒。享受！

编辑：只是为了好玩，右键单击按钮，你可以看到我所指的摇动！

＆＃13;

＆＃13;

func fetchVideos() {

    let url = NSURL(string: "https://s3-us-west-2.amazonaws.com/youtubeassets/home.json")
    URLSession.shared.dataTask(with: url!) { (data, response, error) in

        if error != nil {
            print(error)
            return
        }

        let str = NSString(data: data!, encoding: NSUTF8StringEncoding)
        print(str)

    // this resume function is not reading correctly either
    }.resume()

}

＆＃13;

$('#button').click(function() {
  swingArm();
});

$('#button').contextmenu(function() {
  shakeArm( 1000 );
});

function moveToby() {
  setInterval(function() {
    $(".toby").stop(true, true).animate({
        left: 450
      }, 1000,
      function() {
        $(this).stop(true, true).animate({
          left: 0
        }, 1000);
      });
  }, 2000);
}

function swingArm( swingTime ) {
  if(!swingTime) swingTime = 500;
  $("#rolling-pin").css('animation', swingTime+'ms swing-pin');
  setTimeout(function(){
    $("#rolling-pin").removeAttr('style');
  },swingTime+1);
}

function shakeArm( swingTime ) {
  if(!swingTime) swingTime = 500;
  $("#rolling-pin").css('animation', swingTime+'ms shake-pin');
  setTimeout(function(){
    $("#rolling-pin").removeAttr('style');
  },swingTime+1);
}

＆＃13;

#game-container {
  position: relative;
  width: 700px;
  height: 660px;
  background-image: url('https://i.imgur.com/QxOVkCJ.jpg');
  background-size: cover;
}

#rolling-pin {
  position: absolute;
  top: 300px;
  left: 480px;
  width: 100px;
  height: 75px;
  background-image: url('https://i.imgur.com/zcZTO3z.png');
  background-size: cover;
}

#button {
  position: absolute;
  background-image: url('https://i.imgur.com/v3sQNLD.png');
  background-size: cover;
  height: 100px;
  width: 100px;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

#button:hover {
  transform: scale(1.1);
}

.toby {
  position: absolute;
  height: 239px;
  width: 80px;
  bottom: 157px;
  background-image: url('https://i.imgur.com/ym3YyVW.png');
  background-size: cover;
}

.hidden {
  display: none;
}

@keyframes swing-pin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(50deg);
	}
	100%{
		transform: rotate(0deg);
	}
}

@keyframes shake-pin {
	0% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(50deg);
	}
    40% {
      transform: rotate(25deg);
    }
    50% {
      transform: rotate(50deg);
    }
    60% {
      transform: rotate(25deg);
    }
    70% {
      transform: rotate(50deg);
    }
	100%{
		transform: rotate(0deg);
	}
}

＆＃13;

＆＃13;

＆＃13;