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

这对你有帮助:

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

Answer 2

您可以通过如下方式设置时间持续时间:

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

这里是jsFiddle

希望有帮助

Answer 3

你可以使用animate

的duration和complete选项

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

活塞:http://plnkr.co/edit/d3135325X3R9QkzZjdbz?p=preview

Answer 4

这对你有帮助:

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