Jquery 动画持续一定时间

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

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

 $('#clickMe').click(function(){
   $('#target').animate(
     {opacity: 0.1},
    {
     duration: 2000,complete: function(){
     $('#target').css("opacity", 1);
    }});
});

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

Jquery 动画持续一定时间

Jquery Animate lasting for certain amount of time

html

javascript

jquery

frontend