我如何让一个对象旋转然后在 jquery 中消失

Question

我正在努力制作一个移动菜单按钮，我希望它旋转 90 度然后消失，但我似乎不知道如何让它工作。

我尝试使用 .animate（） 进行旋转，然后使用 hide（） 进行回调，但这不起作用。

我的最新代码如下所示：

$('.menuButton').click(function() {
  $(this).css('transform', 'rotate(90deg)');
  setTimeout( function() {
    $(this).css('opacity', '0');
  }, 1000);
});//end click

<div class="menuButton"></div>

提前谢谢你。

Answer 1

如果可以使用CSS动画，那么我强烈建议利用animate.css。

它有一个易于应用的预制动画列表，您可以使用 jQuery 简单地添加或删除类。

查看下面的简单演示。

(function(){
  'use strict';
  
  $('#run-animation').on('click', runAnimation);
  
  function runAnimation(){
    var target = $('.my-animate-target');
    target.addClass('rotateOut');
    
    setTimeout(function(){
      target.removeClass('rotateOut');
    }, 2000);
  }
  
}());

.container{
  margin:30px;
}
.my-animate-target{
  width:300px;
  padding:20px;
  text-align:center;
  border:1px solid black;
}
#run-animation{
  margin:10px;
  background-color:#fff;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<div class="container"> 
<div class="my-animate-target animated">
  <h1>Watch Me Go!</h1>
</div>
<button type="button" id="run-animation">Run Animation</button>
</div>

Answer 2

我知道

jQuery方法很有吸引力，但最简单的方法之一是将动画放入CSS类中，然后使用jQuery将该类添加到元素中。 所有的魔法都发生在transition。 在这种情况下，我们告诉元素，任何要转换的更改都需要 1 秒。 同样，对不透明度的任何更改都将在开始前等待 1 秒，然后需要半秒钟才能执行。

.menuButton {
  transition: transform 1s, opacity 500ms 1s;
}
.menuButton.hideMe {
  transform: rotate(90deg);
  opacity: 0;
}

现在，您的 jquery 调用将是：

$('.menuButton').click(function() {
  $(this).addClass('hideMe');
});//end click

使用以下示例自行尝试：http://jsfiddle.net/dancingplatypus/qgnmk6s3/

Answer 3

通过简单的方式，您可以执行此操作：

$("#image").click(function(){
$(this).rotate(90);
$(this).hide(1000);
}); 

试着看看这个：http://jsfiddle.net/RwEme/8572/

Answer 4

因为转换没有严格的数值（需要、旋转、缩放等）......如果没有一些工作，它将无法与 Jquery animate 一起使用（大多数仅适用于数值）。请参阅这个其他 SO 问题，以获取除了乔希之外的一些建议