animateで矢印の回転と、画像の高さ変更を同時に行いアコーディオンメニューを実現しています。
添付図のように、初期表示では3つのメニューが同じ高さに設定されており、
矢印ボタンをクリックすると、下記のコードで矢印を下向きに回転させ、アコーディオンの画像の高さを広げています。
android4.4.4やiOS9.1ですと、animate完了時に正しく青い画像の高さ(②の状態)を取得できるのですが
iOS8.1や8.2だと①の状態の高さしか取得できません。
試しに、animatenのcomplete部分でalert表示してみると、
comleteに達しているにもかかわらず見た目上は青い画像が伸びきっていませんでした。(①の状態のまま)
矢印をもう一度押したとき、閉じる動きをするのですが、
その際も青い画像が伸びきったままの高さを取得してしまっています。
ですがなぜかそれ以降のアコーディオン開閉時は正しく高さができるようになります。
なにかiOSのバージョン違いによる問題だとは思いますが、どのように解決に向けて調査を行えばよろしいでしょうか。
ご教授お願いいたします。
###ソースコード
javascript
1 //アコーディオンメニュー開閉 2 $(this).parent("li").animate({"height":y+"px"},{ 3 duration: (base_speed * speed) ,queue: false , 4 complete:function(){ 5 //アコーディオン画像の開閉が完了した時点で高さの再設定を行う。 6 7 } 8 }) 9 //矢印回転 10 $(this).prev("div.open_icon").children("img").animate({zIndex:1},{ 11 duration: (base_speed * speed) , 12 step:function(now){ 13 $(this).css({transform:'rotate(' + (now * arrow*arrow_direction-opp) + 'deg)'}); 14 }, 15 complete:function(){ 16 $(this).css({transform : 'rotate(' + (1 * arrow*arrow_direction-opp) + 'deg)','z-index' : 1}); 17 18 } 19 })
あなたの回答
tips
プレビュー