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ゴシックを指定しています。
解決方法を御存じの方がいらっしゃいましたら、ご教示願います。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/07 12:31:07
  • 終了:2010/12/07 22:15:30

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302010/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 のフォントスタイルを揃えたところ問題のない表示になりました。

id:ftype

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

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

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

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

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

2010/12/07 22:14:48
  • id:ftype
    jquery、jquery ui tab、どちらも最新バージョンを使用しております。
    宜しくお願いします。
  • id:Lhankor_Mhy
    デモページ前者の方をIE8で試してみましたが、普通に動作するようでした。
    開発者ツールでフォントサイズも20ptほどにしてみましたが、特に問題ないようでした。
  • id:ftype
    Lhankor Mhyさん、コメントありがとうございます。
    リンク先を確認してみたところ、normalではなくslowの方にリンク貼っている感じになっていました。
    もしよろしければ、normal、リンク先の少し上を確認願えればと思います。(normalを見たうえで上手く動作していたのであれば、申し訳ないです。)

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

    こちらの環境下でのIE8では、最新バージョンのjquery、jquery ui tabsを用いると、durationをいくら変更してもピョコンと動いてしまいます。
  • id:Lhankor_Mhy
    なるほど、再現しました。
     
    これ、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周りを弄ればごまかせるのかもしれません。
  • id:Lhankor_Mhy
    蛇足ですが。
    IE6,IE7 では再現せず。
    IE8(セーフモード)で再現。
     
    IE8のバグか何かなのかもしれません。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません