Question

我希望按顺序执行三个功能。首先，放大一个物体，然后旋转360度，最后调整到放大前的大小。我可以做第一个和第二个，但我不知道怎么做最后一个。

如何使用jQuery回调实现此目的？任何人都可以给我一个结构工作吗？我是jQuery的新手。

这是我到目前为止所拥有的：

limit

Answer 1

以下是我为您创建的实际链接https://jsfiddle.net/beljems/t83xmj8h/。我修改了你的代码：）

我使用CSS keyframes为div元素设置动画并将setTimeout函数添加到jquery，我估计时间正常：）

Answer 2

我很想使用@keyFrames为这个“复杂”动画推荐一个完整的CSS动画。

和setTimeout()之后删除动画类。

$(document).ready(function() {
  
  // Click handler
  $('#abc').click(function() {

    // CSS Animation!
    $(this).addClass("twist");
    
    // Remove the class after the animation...
    setTimeout(function(){
      $('#abc').removeClass("twist");
    },3000);  // Same delay as the animation time ( 3s )
  });
});

#abc{
  display: inline-block;
  padding: 5px;
  border: 1px solid black;
}

.twist{
  animation-name: bigtwist;
  animation-duration:3s;
}

@keyFrames bigtwist{
  0%{
    transform: scale(1) rotate(0rad);
  }
  30%{
    transform: scale(3) translate(50%, 50%) rotate(0rad);
  }
  70%{
    transform: scale(3) translate(50%, 50%) rotate(6.28rad);
  }
  99.9%{
    transform: scale(1) translate(0%, 0%) rotate(6.28rad);
  }
  100%{
    transform: scale(1) translate(0%, 0%) rotate(0rad);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>  
  <div id="abc">HTML / CSS</div>
</body>

如何做3个jQuery回调

2 个答案: