http://jsfiddle.net/lxm7/Zzuq3/
私は多くの同様の解決策を見回してきましたが、答えが見つからないようです。私は基本的に、ユーザーがオレンジ色の div にカーソルを合わせたときに、画像に徐々に影響を与えたいと思っています。以下のjsfiddleのスニペット。これは以前に回答されていたはずですが、常に画像を隠してdivを表示し、その逆ではありません。
前もって感謝します
http://jsfiddle.net/lxm7/Zzuq3/
私は多くの同様の解決策を見回してきましたが、答えが見つからないようです。私は基本的に、ユーザーがオレンジ色の div にカーソルを合わせたときに、画像に徐々に影響を与えたいと思っています。以下のjsfiddleのスニペット。これは以前に回答されていたはずですが、常に画像を隠してdivを表示し、その逆ではありません。
前もって感謝します
2 つの div を重ね合わanimate()
せて、色付きの div を時間の経過とともにフェードアウトさせるために使用します (逆も同様です): http://jsfiddle.net/CLdP3/29/
animate 関数を制御するオプションは他にもあります。jQuery API リファレンスを確認してください。
Anders Holmstrom は私を打ち負かしました - 私は同じ基本的なアプローチを使用しましたが、絶対位置の内側の画像と jQuery の fadeIn() および fadeOut() を使用しました。比較のためにチェックしてください:http://jsfiddle.net/AjXYK/1/
jQuery は実際には数値を持つ要素のみをアニメーション化できるため、画像と色の要素をレイヤー化し、1 つをフェードインおよびフェードアウトするのが最善の方法です。
http://jsfiddle.net/ufomammut66/9xv4e/
上記の jsFiddle の例は、これを行う方法を示しています。外側のコンテナの上に配置されるカラー div を作成しました。この色の div は、ホバーするとフェード インおよびフェード アウトします。次に、表示されている div を絶対位置に配置することで、カラー div の上に表示されているコンテンツをプルしました。これが役立つことを願っています。