ある変数の値の数だけanimate()を連続再生させたい。
受付中
回答 2
投稿
- 評価
- クリップ 0
- VIEW 708
質問なのですが
アニメーションを順番に連続して再生させるには
複数のanimate()をドットで繋いでいくことで実装できるようですが、
変数の値の数だけ繰り返すにはどうしたらいいでしょう?
また、animate()のプロパティのパラメータに変数を渡すことはできないのでしょうか??
これを
$('').animate({ width: "100%"}, 100);
このような記述したい
var a = { width: "100%"}
$('').animate(a, 100, "swing" );
アニメーションで変化させるプロパティの値を予め配列変数に代入しておき、
ドット繋ぎを使わずに、for文で順番にアニメーションを追加していく…というのが理想です
このような実装方法ありませんでしょうか?
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
TypeScriptかBabelで変換する必要がありますが、
非同期処理を指定回数回すのであれば、以下のようなコードで対応出来ます。
const anime = ($e, index) => {
return new Promise((resolve, reject) => {
$e
.css({ opacity: 0, })
.animate({ opacity: 1, },
{
duration: 1000,
complete: () => {
resolve(index);
},
});
});
};
const $e = $('div');
(async () => {
for (let index = 0; index < 5; index += 1) {
console.log(await anime($e, index));
}
})();
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
今後のことを考慮すればBabel環境を整えて、
Tak_Matzさんの回答のようなasync/awaitを使ったコードを自分も推奨します。
それを踏まえたうえで、IE対策としてお手軽なes5+polyfillでの回答も。
Promiseを返すFunctionを配列として持たせて、reduceで直列実行する手法です。
var opt1 = {width:***};は直接animate関数に書いてもよかったのですが、
「ここでもパラメータ定義の処理を書けますがいかがでしょう」
という意図で一つ上のスコープに定義にしてます。
'use strict';
/**jQuery依存**/
//配列を用意
var anims = function () {
var maxsize = 10;
return Array(maxsize).fill().map(function (ignore, idx) {
return function ($elem) {
var opt1 = {
width: (idx + 1) / maxsize * 100 + '%'
};
var opt2 = {
top: (idx + 1) * 30 + 'px'
};
return new Promise(function (resolve) {
return $elem.animate(opt1).delay(500).animate(opt2, {
duration: 500,
complete: function complete() {
$elem.text(opt1.width);
resolve($elem);
}
});
});
};
});
}();
//reduceで直列実行
anims.reduce(function (prev, curr) {
return prev.then(curr);
}, Promise.resolve($('div')))
.then(function ($elem) {
$elem.text('complete');
});
<div>0%</div>
div {
background:red;
width: 0%;
}
動作確認(IE11対応)
https://jsfiddle.net/dqqtb48o/6/
一応元ソースが存在します。どうやらBabelなしではもう書けない体に^^
https://jsfiddle.net/dqqtb48o/2/
追記:Promise使わなくてもjQueryのqueueで出来ることを思い出しました。
配列でanimateのオプション作って貯めて、最後にdequeueで実行。
ma_a_kiさんのイメージに近いやり方です。
https://jsfiddle.net/dqqtb48o/8/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2017/09/17 18:36
ご自身で試されたコードを質問文に追記されたほうが回答が望めると思います。
退会済みユーザー
2017/09/17 19:13
えっ、変数aにオブジェクト入れて、それをanimateメソッドに渡してダメでしたか?