AndroidとjQueryのスライドアニメーションの不具合

Android2.2でjQueryのスライドアニメーションを利用すると、特定の条件でセレクトボックスの値が切り替わらないという不具合が発生します。

まずは問題なく動作するパターン。

$(".btn").click(function(){
	if($("#search").css("display")=="block"){
		$("#search").slideUp();
	}else{
		$("#search").slideDown();
	}
	return false;
});

サンプル

開閉リンクでセレクトボックスの表示・非表示を切り替えられます。

次が不具合があるパターン。

$(".btn").click(function(){
	if($("#search").css("display")=="block"){
		$("#search").slideUp();
	}else{
		$("#search").slideDown();
		$(this).addClass("selected");
	}
	return false;
});

サンプル

このようにスライドアニメーションと同時にHTMLに変更を加えると、開閉後にセレクトボックスの値が切り替わらなくなります。反応がすごく鈍くなっているのでセレクトボックスを何度もタップしないと反応しません。Android2.1では値は切り替わるのですが反応がすごく鈍くなります。

解決方法は、次のようにコールバック関数を利用してアニメーションが終了した際にHTMLの変更を行うとちゃんと動作するようになります。

$(".btn").click(function(){
	if($("#search").css("display")=="block"){
		$("#search").slideUp();
	}else{
		var self = this;
		$("#search").slideDown(function(){
			$(self).addClass("selected")
		});
	}
	return false;
});

サンプル

関連エントリー

Androidのposition:absoluteとフォームの問題
Androidと-webkit-tap-highlight-color
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidでfont-weight:boldを適用する方法
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ

スポンサードリンク

«Androidのposition:absoluteとフォームの問題 | メイン | 現場のプロから学ぶXHTML+CSS 増刷(13刷)決定 3万部突破»