0

cssプロパティの追加：

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

Firefox（バージョン12）のみがjquery.animate（）で異なる動作をするようにします

http://jsfiddle.net/6Yj2f/1/で2つの画像をクリックすることの違いをご覧ください。

この動作の説明はありますか？

4

1 に答える 1

0

私はこれをchrome21とfirefox13で試しましたが、他のすべてのブラウザーには違いがあると思います。それを期待していると思います。

ここにあるのは、2つの緩和された「アニメーション」の合計です。これが問題を抱えている理由です。これは、jQueryがインラインスタイル（XXは時間とともに変化する）で幅のスタイルを徐々に変更するためです。

<img id="conflicted" class="handCard" src="https://path/to/image.jpg" style="display: inline-block; width: XXpx; ">

したがって、オブジェクトの幅のスタイルを徐々に変更するだけで5秒間のトランジションを実行します。これは、CSSトランジションが設定されていない場合は問題ありません。これは、ブラウザが独自のトランジションを適用しないためです。ただし、CSSトランジションの容易さ（この場合は1秒の線形の容易さ）を使用しながら幅のスタイルを徐々に変更すると、幅のスタイルを変更するたびにブラウザーが容易になります。CSS遷移の容易さを0.1に設定すると、jQueryが幅のスタイルを変更すると、ブラウザーもそれを変更する方法がわかります。ほぼ同時に変更されます。

「$.animate（）を拡張してWebkit、Mozilla、OperaのCSSトランジションを検出し、アニメーションを自動的に変換する」と主張する興味深い「enhaced $ .animation（）」を見つけました。IE6+と互換性がありますが、自分で試してみませんでした。お役に立てば幸いです。

于 2012-05-22T09:23:24.340 に答える