Question

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

我尝试使用.animate（）进行旋转，然后使用hide（）进行回调但是没有用。

我的最新代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

提前谢谢。

Answer 1

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

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

查看下面的简单演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

因为transform没有严格的数值（需要，旋转，缩放等）......它不适用于Jquery动画（大多数只适用于数值）而没有一些工作。除了Josh的

之外，请参阅此other SO question以获取一些建议

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

4 个答案: