回答編集履歴

3 説明不足

so87

so87 score 616

2017/09/21 05:00  投稿

今後のことを考慮すればBabel環境を整えて、
Tak_Matzさんの回答のようなasync/awaitを使ったコードを自分も推奨します。
それを踏まえたうえで、IE対策としてお手軽なes5+polyfillでの回答も。
Promiseを返すFunctionを配列として持たせて、reduceで直列実行する手法です。
var opt1 = {width:***};は直接animate関数に書いてもよかったのですが、
「ここでもパラメータ定義の処理を書けますがいかがでしょう」
という意図で一つ上のスコープに定義にしてます。
```Javascript
'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');
});
```
```html
<div>0%</div>
```
```CSS
div {
 background:red;
 width: 0%;
}
```
動作確認(IE11対応)
[https://jsfiddle.net/dqqtb48o/6/](https://jsfiddle.net/dqqtb48o/6/)
一応元ソースが存在します。どうやらBabelなしではもう書けない体に^^
[https://jsfiddle.net/dqqtb48o/2/](https://jsfiddle.net/dqqtb48o/2/)
追記:Promise使わなくてもjQueryのqueueで出来ることを思い出しました。
配列でanimateのオプション作って貯めて、最後にdequeueで実行。
ma_a_kiさんのイメージに近いやり方です。
[https://jsfiddle.net/dqqtb48o/8/](https://jsfiddle.net/dqqtb48o/8/)
個人的にはPromiseパターンを習得したほうが、役に立つとは思います。
2 補足情報を追記しました

so87

so87 score 616

2017/09/21 04:56  投稿

今後のことを考慮すればBabel環境を整えて、
Tak_Matzさんの回答のようなasync/awaitを使ったコードを自分も推奨します。
それを踏まえたうえで、IE対策としてお手軽なes5+polyfillでの回答も。
Promiseを返すFunctionを配列として持たせて、reduceで直列実行する手法です。
var opt1 = {width:***};は直接animate関数に書いてもよかったのですが、
「ここでもパラメータ定義の処理を書けますがいかがでしょう」
という意図で一つ上のスコープに定義にしてます。
```Javascript
'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');
});
```
```html
<div>0%</div>
```
```CSS
div {
 background:red;
 width: 0%;
}
```
動作確認(IE11対応)
[https://jsfiddle.net/dqqtb48o/6/](https://jsfiddle.net/dqqtb48o/6/)
一応元ソースが存在します。どうやらBabelなしではもう書けない体に^^
[https://jsfiddle.net/dqqtb48o/2/](https://jsfiddle.net/dqqtb48o/2/)
[https://jsfiddle.net/dqqtb48o/2/](https://jsfiddle.net/dqqtb48o/2/)
追記:Promise使わなくてもjQueryのqueueで出来ることを思い出しました。
配列でanimateのオプション作って貯めて、最後にdequeueで実行。
ma_a_kiさんのイメージに近いやり方です。
[https://jsfiddle.net/dqqtb48o/8/](https://jsfiddle.net/dqqtb48o/8/)
個人的にはPromiseパターンを習得したほうが、役に立つとは思います。
1 誤解を招く日本語だったため

so87

so87 score 616

2017/09/21 03:00  投稿

今後のことを考慮すればBabel環境を整えて、
Tak_Matzさんの回答のようなasync/awaitを使ったコードを自分も推奨します。
Promiseを返すFunctionを配列として持たせて、reduceで直列実行する手法です。
var opt1 = {width:***};は直接animate関数に書いてもよかったのですが、
「ここでもパラメータ定義の処理を書けますがいかがでしょう」
という意図で一つ上のスコープに定義にしてます。
```Javascript
'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');
});
```
```html
<div>0%</div>
```
```CSS
div {
 background:red;
 width: 0%;
}
```
動作確認(IE11対応)
[https://jsfiddle.net/dqqtb48o/6/](https://jsfiddle.net/dqqtb48o/6/)
一応元ソースが存在します。どうやらBabelなしではもう書けないのかも^^
一応元ソースが存在します。どうやらBabelなしではもう書けない体に^^
[https://jsfiddle.net/dqqtb48o/2/](https://jsfiddle.net/dqqtb48o/2/)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る