人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery ui tabでのアニメーションについて

現在、jQuery ui tabでのアニメーションでつまずいてしまっています。
タブを切り替えるときに、以下の通りアニメーションをさせているのですが、

$( "#tabs" ).tabs({ fx: { opacity: 'toggle' , duration: 'slow'} });

IE8だと、アニメーションする前後に、ピョコンとテキストが上がったり下がったりします。(他のブラウザは動くようです。)


http://5am.jp/jquery/jquery_ui_tabs/#fragment-2-1_normal
http://www.softel.co.jp/blogs/tech/archives/1564

フォントサイズが10だとテキストが上がったり下がったりしないのですが、11以上だと動いてしまうようです。
フォントにはMS Pゴシックを指定しています。
解決方法を御存じの方がいらっしゃいましたら、ご教示願います。

●質問者: ftype
●カテゴリ:インターネット ウェブ制作
✍キーワード:duration Fx IE8 jQuery UI
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy
●100ポイント ベストアンサー

回避法が判ったような気がしますので、回答欄に書きます。

.p-con p { font: normal 12px/19px "Verdana"; padding: 5px 0px; margin: 5px 0px;}

の指定がありますが、一方で、

.ui-tabs-nav, .ui-tabs-panel {
 font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
 font-size: 12px;
}

という、CSSがあるため、クラス操作の際に違うフォントが表示されているのではないでしょうか。

テストとして開発者ツールで、.p-con p のフォントスタイルを揃えたところ問題のない表示になりました。

◎質問者からの返答

回答ありがとうございます。

jQuery tab内の不必要なCSSと、CSSが干渉していたみたいです。

自分の場合は、bodyにline-heightを使用し、それが干渉し崩れていたようでした。

無事IE8でもアニメーションさせることができました。

非常に感謝しております。ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ