animateのstep関数で使われるnowとは

Question

こんにちわ。
jqueryのanimateででてくる、step関数の引数nowが
良く分からなくて困っています。

具体的には下記URLの「clipを使用したアニメーション」のjsの記述を
理解できずに困っています。
http://wood-roots.com/web%E5%88%B6%E4%BD%9C/jqueryjavascript/clip%E3%81%A8borderwidth%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%9E%A0%E7%B7%9A%E3%81%8C%E9%A3%9F%E3%81%84%E8%BE%BC%E3%82%93%E3%81%A7%E3%81%8F%E3%82%8B%E3%82%88%E3%81%86%E3%81%AA%E3%82%A2

下記コードにて、[fx:10]が、nowの中に入っている…？
nowは「現在のアニメーション状態のプロパティ値」とありますが、
よくわからなくて、挙動を理解できずにます。

$('.clipanim').on('mouseenter',function(){
            $(this).stop(true,true).animate({
            fx: 10
        },{
            duration: 400,
            step: function(now,fx){
                $(this).css({
                    //上下左右10pxずつ切り抜く
                    clip: 'rect('+now+'px '+($(this).width()-now)+'px '+($(this).height()-now)+'px '+now+'px)'
                });
            }
        });

もし宜しければ、ご解説頂けると幸いです。

Answer 1

　分からなくなった時には公式のドキュメントを参照するといいですよ！

Step Function
The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

.animate() | jQuery API Documentation

ということですから、step関数はアニメーションのそれぞれのステップで呼び出される関数で、引数のnowはそのステップ時において変化させる値の数値です。
この場合、fx（というダミー値）を400ミリ秒で0から20に変化させているわけですから、nowは0から20のその時点でのどこかの値が入っていることになります。



もう少し説明をします。
簡単のために1ミリ秒を1ステップとして0から20に変化させるアニメーションだとします。

1ミリ秒目
nowには1が入ってますから

clip: 'rect('+now+'px '+($(this).width()-now)+'px '+($(this).height()-now)+'px '+now+'px)'

　は以下のようになります。

clip: 'rect(1px '+($(this).width()-1)+'px '+($(this).height()-1)+'px 1px)'

　
2ミリ秒目
nowには2が入ってますから

clip: 'rect('+now+'px '+($(this).width()-now)+'px '+($(this).height()-now)+'px '+now+'px)'

　は以下のようになります。

clip: 'rect(2px '+($(this).width()-2)+'px '+($(this).height()-2)+'px 2px)'

　
...

20ミリ秒目
nowには20が入ってますから最終的には以下のようになります。

clip: 'rect(20px '+($(this).width()-20)+'px '+($(this).height()-20)+'px 20px)'

　
実際には、jQuery.fx.interval のデフォルト値が13なので、duration が400ですから、1ステップ目の now は 20*13/400=.65 ぐらいになるんじゃないかと思います。確かめてないですが。




余談ですが、clip: inset を利用した方がすっきりしそうなんですが、それを使ってないのは上手く動かないからなんでしょうかね……？

Comments

[退会済みユーザー]

とても丁寧なご解説ありがとうございました！
nowの「現在のアニメーション状態のプロパティ値」という言い回しに理解することができ、
無事動かすことができました。

clip:insetは初めて見かけましたので、書き換えてみたのですが、
どうも挙動が不思議に（マウスアウト時にclipされる）なりましたが、
inset部に関しては正常に動きました。
自力で挙動を正常にしようと思います。