jQueryにて以下のようなコードを参考書にて確認しました。
jQuery
1$(function(){ 2 var value = 0.5; 3 4 $('.third') 5 .on('mouseenter mouseleave','.btn-action',function(event){ 6 event.preventDefault(); 7 var opacityValue; 8 if(event.type == 'mouseenter'){ 9 opacityValue = value; 10 } else { 11 opacityValue = 1; 12 } 13 14 $(this).find('img') 15 .animate( 16 {opacity:opacityValue}, 17 { 18 duration:500, 19 step:function(now,tween){ 20 var rotate = 'rotate(' + (1 - now) * (360 /value) + 'deg)'; 21 $(this) 22 .css({ 23 '-wevkit-transform':rotate, 24 'transform':rotate 25 }); 26 } 27 } 28 ) 29 }); 30});
上記のコードでimgタブの画像がマウスをかざしたら回転したのですが
マウスをかざすももしくは離すとcssのtransformが適用されるのはわかったのですが
stepの関数のnowとtweenの引数にどのような値が代入されていくのか
また式で使用されているvalueについてはどのような値が代入されるのかわからないです。
日本語のanimate関数のリファレンスをみると「各アニメーション要素の各アニメーションプロパティから呼び出される関数で、 アニメーションのフレームが進むたびに実行する処理を指定することが出来ます。」とあり
何秒か何ミリ秒かわかりませんがアニメーションが進むたびにfunctionを実行するということまで理解できましたが
nowなどの値についての言及がなかったです。
以上です、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/07 16:04
2021/11/07 16:21
2021/11/07 16:23