Question

我试图让jQuery动画功能只持续几秒钟，然后恢复原始项目。

<button id="clickMe"> Click </button>
<div id="target"> Target </div>

和Jquery：

$(document).ready(function(){
  $('#clickMe').click(function(){
    $('#target').animate({opacity: 0.1}, 'slow');
  });
});

如何让这个效果仅持续两秒？感谢

Answer 1

你可以通过设置这样的持续时间来实现：

$(document).ready(function() {
   $('#clickMe').click(function() {
      $('#target').animate({
          opacity: 0.1
      }, 2000, function() {
          $('#target').animate({
             opacity: 1
          })
      });
   });
});

以下是jsFiddle

希望有所帮助：）

Answer 2

这有助于您：

$( "#target" ).animate({ opacity: 0.1 }, 2000, function() {
// Revert back.
});

Answer 3

这有助于您：

<script>
        $(document).ready(function(){
        $('#clickMe').click(function(){
        $('#target').animate({opacity: 0.1}, 2000).animate({opacity: 1});
          });
        });
</script>

Answer 4

您可以使用动画的持续时间和完整选项

[]

plunker：http://plnkr.co/edit/d3135325X3R9QkzZjdbz?p=preview

Jquery Animate持续一段时间

4 个答案: