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'); 
    }); 
}); 

どのように私はこの効果が2秒間だけ言う続く作るでしょうか？おかげ

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

このヘルプあなた：

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

Answer 4

アニメート

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

plunkerの期間と完全なオプションを使用することができます：あなたは（.animateで持続時間を有するhttp://plnkr.co/edit/d3135325X3R9QkzZjdbz?p=preview