質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iOS 8

iOS 8(アイ・オーエス8)は、アップル社が2014年9月に発表したオペレーティングシステムです。iPhone 4sより対応しています。デザイン性の変更はなく、アプリや各種機能が強化されています。また、サードパーティ開発者のために、多くのAPIが開放されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1781閲覧

iOS9以前だとanimateのcompleteが正しく機能しない。

manz

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iOS 8

iOS 8(アイ・オーエス8)は、アップル社が2014年9月に発表したオペレーティングシステムです。iPhone 4sより対応しています。デザイン性の変更はなく、アプリや各種機能が強化されています。また、サードパーティ開発者のために、多くのAPIが開放されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/12/16 13:45

###発生している問題・エラーメッセージ
イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問