ある変数の値の数だけanimate()を連続再生させたい。

Question

質問なのですが
アニメーションを順番に連続して再生させるには
複数のanimate()をドットで繋いでいくことで実装できるようですが、
変数の値の数だけ繰り返すにはどうしたらいいでしょう？

また、animate()のプロパティのパラメータに変数を渡すことはできないのでしょうか？？

これを
$('').animate({ width: "100%"}, 100);

このような記述したい
var a = { width: "100%"}
$('').animate(a, 100, "swing" );

アニメーションで変化させるプロパティの値を予め配列変数に代入しておき、
ドット繋ぎを使わずに、for文で順番にアニメーションを追加していく…というのが理想です

このような実装方法ありませんでしょうか？

Comments

[kei344]

ご自身で試されたコードを質問文に追記されたほうが回答が望めると思います。

[退会済みユーザー]

えっ、変数aにオブジェクト入れて、それをanimateメソッドに渡してダメでしたか？

Answer 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/

Answer 2

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));
    }
})();

例）
https://jsfiddle.net/takmatz/z1ayrjy0/