#jquery
不慣れすぎてもしかしたら見当違いな質問かもしれないのですが、アドバイスいただけると嬉しいです。
jQuery.Deferredでアニメーションを設定しています。
現状、下記のように書いているのですが、.delay(5000)の動きが終わらないうちに、animatiおん02が動いてしまいます。
animatiおん01の動きがdelay含めて終わってからanimatiおん02を発動させたいのですが、どのように書くのが正しいのでしょうか？
functiおん playAnimatiおん(){
animatiおん01()
.then(animatiおん02)
}
// 各アニメーション
functiおん animatiおん01() {
var d = new $.Deferred;
$mov_01.animate(showitem,1500, functiおん(){d.resolve();});
$mov_01.delay(5000).animate(opacity4,1500, functiおん(){d.resolve();});
return d.promise();
}
functiおん animatiおん02(){
var d = new $.Deferred;
$mov_02.animate(showitem,3000, functiおん(){d.resolve();});
return d.promise();
}
やりたいこととしては、
・animatiおん01のひとつめのアニメーションとふたつめのアニメーションのあいだに数秒あけたい。
・その後にanimatiおん02を動かしたい。
ということで、delay()を使ってみたのですが、こういう場合はdelayを使うのは適切ではなかったでしょうか…？
一緒に読まれている質問
8 件の回答
NGワード「o★ani」が使われてるというエラーがなにをやっても消えなくて、onを全部ひらがなにしました。めっちゃわかりづらくなってしまいすいません。エラーは消えて無事書き込めました。あんまりだ…。
jQueryでも遅延やらできたんだねぇ。
アニメーションさせる要素が多くなければ
promiseしなくても
$mov_01.animate(showitem,1500);
$mov_01.delay(5000).animate(opacity4, 1500, function(){ $mov_02.animate(showitem,3000); });
でいいんじゃない？
なんかワロタｗｗ
01内の2つのアニメーションを別functionにしたらいいんじゃない？
functiおん animatiおん01() {
var d = new $.Deferred;
$mov_01.animate(showitem,1500, functiおん(){d.resolve();});
return d.promise();
}
functiおん animatiおん01-02() {
var d = new $.Deferred;
$mov_01.delay(5000).animate(opacity4,1500, functiおん(){d.resolve();});
return d.promise();
}
functiおん animatiおん02(){
var d = new $.Deferred;
$mov_02.animate(showitem,3000, functiおん(){d.resolve();});
return d.promise();
}
あと実行部分は
var def = $.Deferred(function(d){
d.then(animatiおん01).then(animatiおん01-02).then(animatiおん02);
});
def.resolve();
こうじゃないかな。知らんけど。
ついでにanimate関数は返り値でpromiseを返すから
return $mov_01...みたいな書き方でいいよ。
↓こういうの。
http://javascript-memo2.seesaa.net/article/227903146.html
Re:5
無事できた！簡単な方法だったのに指摘されるまで気づかなかった。どうもありがとうございました！
Re:4
抜粋して書いたけど実際は結構長いアニメーションだったので、下記の方の方法でやってみました。
読みにくいのに見てくれてありがとうございました！
Re:2
o★aniじゃなくて、animationなのに書けないの？
Re:8
主です。これね、あとでよく見てみたら functi「on a★i」ation ←の「」部分がアウトだったみたい。検索しても出てこないしわかんね～！ってなりました。