jQueryホバーイメージ変更アニメーション

Question

私はグレースケールイメージを持つIMGタグを持っています。私はホバー上のカラーイメージに "src"を変更し、マウスアウト時にはグレースケールに戻すためにHover（）イベントをフックしました。

これはうまくいきますが、変更は突然です。私は、色がフェードインとフェードアウトに見えるように、エフェクトにわずかなfadeIn（）を追加したいと思います。私は働くと思ったが、そうではないと書いた。 （画像は変化しますが、フェードや効果の遅延はありません）。私は間違って何をしていますか？

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

ここ

カップルのソリューションがあります。この

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

で試してみてください。すぐに画像を変更するソースを設定しているため、コードが機能しません。おそらく両方の画像を読み込み、CSSでオーバーレイし、親コンテナがマウスオーバーしたときに色をフェードアウトさせる方が簡単でしょう。別の方法としては、それらフェード

CSS

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

HTML

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

フェードマウスオーバーで

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

でクロス流行渡ることができ電子

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

実際にゆっくりと、この要素をフェードインしようとしている、と「これは」の代わりに

$("#showForm") 

を指しているしたい場合は、現在のグレースケールの上に直接カラー画像を入れることができます。画像は、隠されたカラー画像をマークし、その後、彼らはあなたが行うことができ、互いの上に配置されていると仮定すると、それはゆっくりとフェードインがあります。

$("#showForm").hover(
    function() { 
     $("#colorImageID").fadeIn(); 
    }, 
    function() { 
     $("#colorImageID").fadeOut(); 
    }); 
    } 

）; HTMLを想定し

のようなものである（sameAbsolutePositionはので、多分同じ正確な場所にそれらを置くために、CSS、何か位置のようです：絶対;左：20;トップ：20ピクセル;）：へ

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

繰り返しますが、別の画像の上に新しい画像を退色させます。また、グレースケール画像を同時にフェードアウトすることもできます。

Answer 3

どこがフェードアウトですか？ フェード100から一度0

に変更不透明度から0うち100 フェードに変え不透明度display:blockんdisplay:noneを行うには、あなたのフェードイン、アニメーションを見ていけない、イメージがdisplay:blockで、不透明だから100です。 。 したがって、fadeInの前にもう一度display：noneまたはfadeOutを実行してください。

例を挙げて説明します。要件に応じて変更する必要があります。

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

はるかに良い解決策：

この仕事をするためにはJavaScriptを忘れます。代わりにCSSのspritesを使用してください。あなたがfadeIn、fadeOutを持っていることを主張するなら、トランジションを使用してください。

UPDATE：以下のコメントに応じて、私はToddのスプライトの次元と位置を予測できる方法がないので、コードを書くことはできません。私はまた、私が彼がIE8とIE9で動作する必要があると仮定しているため、スプライトを使用してトランジションを使用して「機能性」を向上させるだけでなく、トランジションを行うことを提案したいと思います。

Answer 5

はここFiddle

Answer 6

あなたもトランジションを使用してCSS3で、このクロスフェードを行うことができます。例えばCSS: image link, change on hover

と同様に、すべてのブラウザで利用できるが、それでも... http://www.w3schools.com/css3/css3_transitions.asp

ない ：

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}