質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

710閲覧

jQueryのanimateの関数の変数nowとtween

Carlos_is_only

総合スコア42

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/11/06 09:53

編集2021/11/07 16:05

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などの値についての言及がなかったです。

以上です、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

stepの関数のnowとtweenの引数にどのような値が代入されていくのか

jquery の tween オブジェクトについては文書化されておらず、将来的に廃止される可能性があるため、使わない方が良さそうです。(参考:jQuery - What is a Tween object?
用途としてはカスタマイズした tweener を登録することで、 独自のアニメーションが行えるようです。

下記記事に少し解説が記載されていました。

■ 独自の tweener を作成してアニメーションをカスタマイズ
http://myjquery.blog.fc2.com/blog-entry-25.html

valueなどの値についての言及がなかったです。

value については単に「value = 0.5」が固定値として使われているのではないでしょうか?

投稿2021/11/07 13:10

cx20

総合スコア4633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Carlos_is_only

2021/11/07 16:04

なるほど、valueについては単なる変数でした。 質問したかったのはnowでした、修正します。
cx20

2021/11/07 16:21

now についてはこちらに説明とサンプルがありました。 フレーム毎に step が呼ばれ、その時のアニメーションの状態(0~1)が now に入るようです。 ■ animate(params, options) - jQuery 日本語リファレンス http://semooh.jp/jquery/api/effects/animate/params%2C+options/
cx20

2021/11/07 16:23

now に何が入っているかは console.log(now); と入れてみたら確認できるかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問