如何让对象旋转然后在 jquery 中消失？答案

【问题标题】：How do I have an object rotate and then dissapear in jquery?如何让对象旋转然后在 jquery 中消失？
【发布时间】：2015-06-23 06:35:43
【问题描述】：

我正在制作一个移动菜单按钮，我希望它旋转 90 度然后消失，但我似乎无法弄清楚如何让它工作。

我尝试使用 .animate() 进行旋转，然后使用 hide() 进行回调，但没有成功。

我的最新代码如下：

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

&lt;div class="menuButton"&gt;&lt;/div&gt;

提前谢谢你。

【问题讨论】：

标签： javascript jquery mobile

【解决方案1】：

您可以通过简单的方式做到这一点：

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

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

【讨论】：

【解决方案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/

【讨论】：

简单。优雅的。简单。谢谢！我什至没有想过这样做。

【解决方案3】：

因为 transform 没有严格的数值（需要、旋转、缩放等）...如果没有一些工作，它将无法与 Jquery animate 一起使用（大多数情况下仅适用于数值）。请参阅此other SO question 获取除 Josh 之外的一些建议

【讨论】：

【解决方案4】：

如果可以使用 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>

【讨论】：