JavaScriptを使ってサムネイルイメージをグレースケールから色にフェードする

Question

私は比較的ウェブ開発には新しく、マウスオーバー時にグレースケールのサムネイルイメージをカラーサムネイルイメージにフェードインするJavaScriptをどこでコーディングするのかを知りませんでした。 mouseoff（< - これが何であれ呼び出されてもかまいません）。

私はすべてを見て、これを行うスクリプトを見つけることができません。これは可能ですか？これを行うにはjqueryを使用できますか？他の考え？

ご協力いただきありがとうございます。

Answer 1

私はあなたができることは、黒と白を色の上に重ねて、一度にコンテナに2つのサムネイルを読み込むことです。次に、jqueryを使用してサムネイルの不透明度を0.0にフェードインできます。ここで（それは一度だけ、それを変更するにはクリックを使用していますが、私はあなたにマウスオーバー/マウスアウトを残しておきます - あなたがアニメーションをスピードアップすることもできます）作業例です。

一部のHTML：

<div class="container"> 
    <img src="blackandwhite.jpg" class="bw" /> 
    <img src="colour.jpg" class="colour" /> 
</div> 

いくつかのCSS：

.container { position: relative; } 
.container img { position: absolute; } 
.bw { z-index: 101; } 
.colour { z-index: 100; } 

いくつかのjQuery：

$(function() { 
    $(".bw").click(function() { 
     $(this).animate({ opacity: 0.0 }, 800); 
    }); 
}); 

Answer 2

これを行うための最善の方法は、実際になります画像の2つのバージョンがあります。 1つはグレースケールで、もう1つはカラーです。厳密にjavascriptとhtml内に保つために、私は2つのイメージメソッド以外の方法はないと信じています。 Flash、Silverlight、さらにはHTML 5でも簡単に操作できます。

Answer 3

本当にフェードしたいのですか？

典型的にスワップはCSS

<a class="btn"></a> 

とボタン画像が垂直に積み重ねられた両方の画像を含む場合に行くほとんどパフォーマンスの改善があります。この場合、CSS

a.btn { 
    background: url(../images/button-image.png) no-repeat 0 0; 
    width: 110px; 
    height: 16px; 
    margin: 10px 0 0; 
} 
a.btn:hover { 
    background-position: 0 -16px; 
} 

、を介して行われCSSは背景画像をスライドしていますが、それは同じ考えです。ブラウザは2つではなく1つのイメージをダウンロードするだけでよいため、パフォーマンスが向上します。