3

Jqueryでクラスチェンジ時のアニメーションを滑らかにしようとしています。

ただし、背景ではなく、テキストの色でのみ機能します。

詳細については、これを確認できます:( :

http://jsbin.com/upufut

4

2 に答える 2

3

これは単にライブラリのバージョンの問題です。

jsbinはjQuery1.3.2とjQueryUI1.7.2を示しています。

このjsfiddle（jq1.3.2およびjqui1.7.2）では、機能しません。

このもう1つ、両方のライブラリの最新バージョンでは、動作します。

jQuery 1.3.2はレガシー以上のものであり、選択の余地がない場合を除いて、もう使用しないでください。ただし、いくつかの（過剰な）機能が機能しないことを期待する必要があります。

グラデーションのアニメーション

jQuery UIのドキュメントを見ると、色をアニメーション化するためのオーバーロードされた.animate（）のグラデーションをサポートしていないようです（doc）。単色で動作すると思います。

jQuery UIエフェクトコアは、アニメーション関数を拡張して、色もアニメーション化できるようにします。これはクラス遷移機能によって頻繁に使用され、次のプロパティをカラーアニメーション化できます。

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • 色
  • outlineColor

次のいずれかの組み合わせで：

  • 16進数（＃FF0000）
  • rgb（rgb（255,255,255））
  • 名前（「黒」）

一方、CSSトランジションは、どのブラウザでもグラデーションを処理しません。ただし、いくつかの回避策があります。

あなたが言及しているYouTubeのボタンに関する一言。

私の場合、グラデーションはCSSトランジションを使用しているため、アニメーション化されていません。これが私がそれをテストした方法です：

  1. YouTubeのビデオページに移動します。
  2. コンソールを開くためのボタン（クロム）の「要素の検査」。要素を選択し<button>ます。
  3. CSSクラス.yt-uix-button[-*-]transition: all 0.218s;を見て、を「1s」に変更します
  4. たとえば、グラデーションの色の1つを緑に変更します。
  5. ボタンにカーソルを合わせると、すべてのプロパティがアニメーション化されますが、グラデーションはアニメーション化されません。

私の意見では、境界線のアニメーション（など）は、グラデーションがアニメーション化されているという印象を与えますが、そうではありません。

于 2011-12-07T15:06:35.437 に答える
0

なぜ使用するjavascript:$(this).removeClass("hoverf",1000)のかわかりませんが、removeClassの2番目のパラメーターは何ですか？そして、私は何の問題も見つけません、それはクロムでうまく機能します。

于 2011-12-07T14:52:10.320 に答える