animateメソッドの引数の書き方

・functionでつなぐか

・メソッドチェーンで記述するか

　

ですが、

メソッドチェーンで記述すると、メソッド自体は順番に終了ごとに行われるが
そのanimate本体の下の行はどんどん処理してしまう。

　

functionだと、別にanimateの内容じゃなくてもその部分に付け加えられるので楽。らしい。

　

eles=[];//初期化

をどこの行にいれるか問題

　

ここにいれるらしい

　

}else{

　　　console.log('不一致');

　　　eles[0].animate({'opacity':'20%'},1500,function(){//第二引数でミリ秒、第三引数でアニメが終わったら次実行

　　　　　eles[0].css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1',

　　　　　'pointer-events':'auto'},);

　　　});

　　　eles[1].animate({'opacity':'20%'},1500,function(){

　　　　　eles[1].css({'background':'#000','background-image':'url(img/fish_kue2.png)','background-size':'contain','background-repeat': 'no-repeat','opacity':'1',

　　　　　'pointer-events':'auto'});

　　　eles=[];//初期化

　　　});

　　　

　　}

　

それでもアニメの最中にクリックすると挙動がよろしくない（3枚でもクリック出来たり）

→カードに蓋をしてクリックできないようにしよう

→でもかぶせっぱなしだとクリックできない

→重ね順を変えていけばいいらしい

　

z-indexというプロパティで制御するらしい。

　

>z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

 

読んでおくとよさそう

　

もし時間があったら来週これをやるかも。