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

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

ログインして回答する

ベストアンサー

Lhankor_Mhy2010/12/07 17:46:04
満足100pt
回避法が判ったような気がしますので、回答欄に書きます。
```
.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 のフォントスタイルを揃えたところ問題のない表示になりました。
スター
- ftype 2010/12/07 22:14:48
  
  回答ありがとうございます。
  
  jQuery tab内の不必要なCSSと、CSSが干渉していたみたいです。
  
  自分の場合は、bodyにline-heightを使用し、それが干渉し崩れていたようでした。
  
  無事IE8でもアニメーションさせることができました。
  
  非常に感謝しております。ありがとうございました。

その他の回答

この質問へのコメント

ftype2010/12/07 12:33:25

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

デモページ前者の方をIE8で試してみましたが、普通に動作するようでした。
開発者ツールでフォントサイズも20ptほどにしてみましたが、特に問題ないようでした。
ftype2010/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_Mhy2010/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_Mhy2010/12/07 17:04:56

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

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

ベストアンサー

Lhankor_Mhy2010/12/07 17:46:04
満足100pt

ftype 2010/12/07 22:14:48

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

ベストアンサー

Lhankor_Mhy2010/12/07 17:46:04 満足100pt

ftype 2010/12/07 22:14:48

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

Lhankor_Mhy2010/12/07 17:46:04
満足100pt