6

シンプルな CSS3 移行コードの JQuery/JS フォールバックを探しています。私の JavaScript は非常に基本的なものなので、代わりのコードを見つけて書くのは簡単ではありません。私はすでに modernizr をチェックアウトしましたが、多くのドキュメントをよく理解していませんでした。

ホバーするときに使用するアイコンです transform: rotate(20deg)(これは IE でサポートされているため問題ありません)。しかし、問題は移行です、私は使用しています

  .icon{
....other css code
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}

これに対する JQuery フォールバックはありますか? 私は考えてfadeIn();いましたが、これをどのようにコーディングするかわかりません。このようなもの？：

<script>$(icon).hover(function (){$(icon).fadeIn("slow");}); </script>

また、IEの場合にのみJQueryを選択するように、ブラウザにフォールバックであることを知らせるにはどうすればよいですか?

4

2 に答える 2

15

あなたはすでに答えを持っていると思います.modernizrを使用する必要があります.あなたが考えるほど複雑ではありません.modernizrが使用可能な機能とそうでない機能を指定する方法は2つあります.最初の方法は. HTML 要素:

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

利用可能な場合は名前が表示され、利用できない場合は「no-flexbox」のような「no-」接頭辞が付いた名前が表示されます.2番目のものはjavascriptによるものです:

if(!Modernizr.csstransitions)

Modernizr には、利用可能かどうかを示すブール変数のセットがあるため、アニメーションのフォールバックを設定する場合は、Modernizr クラスを使用して、この機能を備えたブラウザーに対してのみアニメーションを指定することをお勧めします。 :

.csstransitions #element{
-webkit-transition: ... ;
-moz-transition: ... ;
-o-transition: ... ;
-ms-transition: ... ;
transition: ... ;
}

次に、機能が利用可能かどうかを確認するための変数を含む JavaScript ファイルを作成します。利用できない場合は、アニメーションを指定します。

if(!Modernizr.csstransitions)
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

これにより、Modernizr がどのように機能するかがわかるかもしれません (私は願っています)。とにかく、問題がある場合は、私がずっと前に作成したこのブログ投稿を確認してください。CSS3PIE などの他のものでこのようなことが書かれています (これはスパムではありません。私はただ助けようとしているだけです）。

于 2013-03-28T13:46:57.950 に答える
7

Transitは、jQuery animate 呼び出しを CSS3 アニメーションに変換し、サポートされていないブラウザーの場合は通常の js にフォールバックします。

または、 $.support を拡張して、このような遷移をチェックし、それらのテストが失敗したときに jQuery animate を使用することもできます。

于 2013-03-28T13:33:49.023 に答える