javascript - Dreamweaver のイメージ ロールオーバーのイージング効果を作成するには?

Answer 1

特に（クロスプラットフォームの）Javascriptソリューションをお探しですか？

そうでない場合は、純粋なCSS3で簡単に実行できます。IEには愛がありませんがtransitions。D：

次のようにCSSを設定してみてください。

div.roller { width: 50px; height: 50px; border: solid 1px green;}

div.roller div { -webkit-transition: all 1s ease-in-out; width: 50px; height: 50px; }

div.off, div.roller:hover div.over { opacity: 1.0; }

div.roller:hover div.off, div.over { opacity: 0; }

.off { background-color: red; position: absolute;}

.over { background-color: yellow; }

のブラウザ固有のプレフィックスを追加します。便宜上transitions使用しました。-webkit-

.off画像をとdivの背景として設定したり、.over内部に埋め込んだり、imgタグの代わりにdivタグを使用したりすることもできます。

要素を最初のアップ状態で設定して、ダウン状態の上にスタック.offするようにしてください。position: absolute.over

そしてそのようなhtml：

<div class="roller" >
    <div class="off">off</div>
    <div class="over">over</div>
</div>​

ここでそれをいじる。