アニメーションが停止したときにjQueryアニメーションをリセットします

このwebsiteから、SVG/Circle要素とjQueryアニメーション関数を使用して、ユーザークリックで波紋効果を作成する素晴らしい波紋効果の実装が見つかりました。基本的なプログラミングの知識はありますが、JavaScriptやjQueryのメソッドや関数についてはあまり知られていないので、JSやjQueryに関する私の研究から多くを読んだことがあります。アニメーションが停止したときにjQueryアニメーションをリセットします

リップル効果の実装が見つかりました。便利で軽量で簡単なので、私は自分のプロジェクトに合わせてコードを探検し、拡張したいと思っています。

ここで知る必要があるのは、アニメーションが停止したときのアニメーションの変更をリセットするにはどうすればいいですか？これは簡単な質問ですが、JSとjQueryの初心者としてはどうしたらいいですか？

デモcodeここに実際に何が起こっているかを見てください。

私は（コードに見られるような）機能を追加してみました：

complete : function(){c.removeAttr('style');}

しかし、何も変わっていないと、アニメーションが終了した後、それがまだ残っています。

私が迷っているものは何ですか？

出典

2016-07-18 Chain Trap

変更の完全なコールバックを使用することができますから、「R」を除去するために

complete : function() { $(this).remove(); }

出典

2016-07-18 07:46:13

これはうまく動作します！ありがとうございます。 –

あなたはアニメーションの停止のための停止方法を使用する必要があります - https://api.jquery.com/stop/

あなたもclearQueue方法

出典

2016-07-18 07:46:12

あなたがコードを共有できるので、私は自分のコードで機能を配置する場所を見ることができますか？ –

の代わりにc.removeAttr（ 'style'）;この$（this）.remove（）を使用します。 –

サークルのスタイル属性を試してみてください。

complete : function(){c.css("r", "");}

Ref：http://api.jquery.com/css/スタイルプロパティの値を空の文字列に設定します。 $("#mydiv").css("color", "") - 要素からそのプロパティを削除します。

または

complete : function(){c.css("r", "0");}

以下のスニペットを実行してみましょう：

(function(){ 
 
    
 
    $(".button").on("click", function(e){ 
 

 
     var yOffset = e.pageY - $(this).offset().top; 
 
     var xOffset = e.pageX - $(this).offset().left; 
 
     var self = this; 
 
      
 
     var xPos = parseInt(xOffset); 
 
     var yPos = parseInt(yOffset); 
 

 
     $(this).find("svg").remove(); // Remove existing animation changes 
 
     $(this).append('<svg><circle cx="'+xPos+'" cy="'+yPos+'" r="'+0+'"></circle></svg>'); 
 
      
 

 
     /* Make the animation of SVG - Circle */ 
 
     var c = $(self).find("circle"); 
 
     c.animate(
 
      { 
 
       "r" : $(self).outerWidth() 
 
      }, 
 
      { 
 
       easing: "easeOutQuad", 
 
       duration: 500, 
 
       step : function(val){}, 
 

 
       /*------------------------- 
 
       THIS FUNCTION SHOULD WORK 
 
       --------------------------*/ 
 
       complete : function(){c.css("r", "0");} 
 
      } 
 
     ); 
 
    }); 
 
}());

.button { 
 
position: relative; 
 
display: inline-block; 
 
height: 40px; 
 
padding: 0 20px; 
 
margin: 0; 
 
background: transparent; 
 
border: none; 
 
color: rgb(0,0,0,0); 
 
font-size: 20px; 
 
font-weight: 900; 
 
text-align: center; 
 
text-transform: uppercase; 
 

 
-webkit-tap-highlight-color: transparent; 
 
} 
 

 
.button:hover { 
 
background-color: rgba(158,158,158,0.10); 
 
} 
 

 
.button:active, 
 
.button:focus { 
 
background-color: rgba(158,158,158, 0.30); 
 
outline: 0; 
 
} 
 

 

 
/* SVG - Circle for the ripple effect */ 
 
.button svg { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
height: 100%; 
 
width: 100%; 
 
} 
 

 
.button circle { 
 
fill: rgba(0,0,0,0.50); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width"> 
 
<title>Reset jQuery animation when it stops animating</title> 
 
</head> 
 
<body> 
 
<button class="button">Button</button> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> 
 
</body> 
 
</html>

出典

2016-07-18 07:51:35 kolunar

私は試してみましたが、うまくいきませんでした... –

@ChainTrapこれはJSBinでは 'complete：function（）{c.css（" r "、" "）;}'で動作しません。私は自分の答えを編集した、jqueryのドキュメント（http://api.jquery.com/css/）によると、コールバックは 'complete：function（）{c.css（" r "、0）;}' – kolunar

'例えば$（ "#mydiv"）.css（ "color"、 ""） ' - 要素からそのプロパティを取り除く'明らかにJSBinでは動作しません。 – kolunar

アニメーションが停止したときにjQueryアニメーションをリセットします

答えて

関連する問題