jquery:animate中にイベントを付与

質問

#box{width:100%;height:100%;position:relative;}
#idou{width:3000px;height:100%;position:absolute;}
#ugoku{position:absolute;top:-300px;right:-1500px;}
a{display:block;width:100px;height:100px;right:0;top:100px;}

<div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div>

・jQuery(1.7.1）
・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。
・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。
・移動の角度は50度で設定、#idouのleftが-1000～-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。

最後の項目をやろうとして完全に行き詰ってしまって困っています。
どちらかというと数学の問題かもしれません。
animate動作中に、#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？その他良いやり方やURLあれば教えて頂けると幸いです。
よろしくご教授ください。

回答No.1

fujillin · ベストアンサー

意味がよく理解できてませんが…

＞#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？
そのようなイベントはありませんので、監視していて所定の条件になったら処理を行なうといった方法になろうかと思います。

何もきっかけもない時は、常時、一定時間ごとに監視を繰り返すことになりますが、ご質問のケースではanimateの動作中だけ監視すればよさそうなので、animateのoptionのstepを利用すれば、アニメーションの1ステップごとに所定の関数が呼び出されますので目的を達せられませんか？

http://api.jquery.com/animate/

例えば、
　$("a").click(function(){
　var i=0;
　　$("#idou").animate({left:0},{
　　　duration: "slow",
　　　step: function(now){
　　　　$("body").append("<div>step" + (i++) + " left=" + now + "</div>");
　　　}
　　});
　});

（インデントを全角空白にしてあります）

お礼

説明がうまくできなかったのにこちらが知りたいことを
的確にご回答ありがとうございました！
結果的に使用はしなくなりましたが、
今後に大変役に立ちました。
ありがとうございました！