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

Question

ftype

6

4もっと見る

100pt

インターネットウェブ制作

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以上だと動いてしまうようです。
フォントにはＭＳＰゴシックを指定しています。
解決方法を御存じの方がいらっしゃいましたら、ご教示願います。

回答の条件

1人2回まで

登録：2010/12/07 12:31:07
終了：2010/12/07 22:15:30

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ftype 2010/12/07 12:33:25

jquery、jquery ui tab、どちらも最新バージョンを使用しております。
宜しくお願いします。
Lhankor_Mhy 2010/12/07 13:21:41

デモページ前者の方をIE8で試してみましたが、普通に動作するようでした。
開発者ツールでフォントサイズも20ptほどにしてみましたが、特に問題ないようでした。
ftype 2010/12/07 15:47:48

Lhankor Mhyさん、コメントありがとうございます。
リンク先を確認してみたところ、normalではなくslowの方にリンク貼っている感じになっていました。
もしよろしければ、normal、リンク先の少し上を確認願えればと思います。（normalを見たうえで上手く動作していたのであれば、申し訳ないです。）

こちらの環境（Vista）だと、前者ページの「opacity: ‘toggle’, duration: ’slow’」はうまく動作するのですが、「opacity: ‘toggle’, duration: ’normal’」だとピョコンと動いてしまいます。
他のアニメーションは、アンチエイリアスがはずれるなどはありますが、ピョコンとは動きはしないんですよね・・。
（ただ、前者ページの場合だとjqueryのバージョン、jquery uiのバージョンが古いため他のアニメーションがうまくいっているのかもしれないです。）

こちらの環境下でのIE8では、最新バージョンのjquery、jquery ui tabsを用いると、durationをいくら変更してもピョコンと動いてしまいます。
Lhankor_Mhy 2010/12/07 16:54:40

なるほど、再現しました。
　
これ、CSSの問題かもしれませんね。
開発者ツールで見るとですね。
　
.p-con P についているスタイルがこうなってます。
PADDING-BOTTOM: 5px
MARGIN: 5px 0px
PADDING-LEFT: 0px
PADDING-RIGHT: 0px
font: 12px/19px "Verdana"; PADDING-TOP: 5px
　
この、font:～　を無効にすると、正常に表示されている気がしました。
　
で、なんだこりゃ、と思ってstyle.cssを出力させると、
.p-con P {
PADDING-BOTTOM: 5px; MARGIN: 5px 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 12px/19px "Verdana"; PADDING-TOP: 5px
}
となっていました。
しかし、元のソースを見ると、
.p-con p { font: normal 12px/19px "Verdana"; padding: 5px 0px; margin: 5px 0px;}
と、正しく書かれているようでした。
　
どーにも何が原因か分かりませんでしたが、CSS周りを弄ればごまかせるのかもしれません。
Lhankor_Mhy 2010/12/07 17:04:56

蛇足ですが。
IE6,IE7 では再現せず。
IE8(セーフモード)で再現。
　
IE8のバグか何かなのかもしれません。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Lhankor_Mhy · Accepted Answer · 2010-12-07T17:46:04+09:00

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

.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 ui tabでのアニメーションについて

ベストアンサー

Lhankor_Mhy8142322010/12/07 17:46:04

コメント（5件)

この質問への反応（ブックマークコメント）