5

グレースケール画像の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');
                });
              }
            );
4

7 に答える 7

9

ここにいくつかの解決策があります。画像をすぐに変更するソースを設定しているため、コードは機能しません。両方の画像をロードし、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();
});​
于 2012-04-06T04:54:45.647 に答える
0 
 $(this).fadeIn('slow',

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

$("#showForm")

代わりに、必要に応じて、現在のグレースケール画像の上にカラー画像を直接配置し、カラー画像を非表示にマークしてから、ゆっくりとフェードインさせます。それらが互いに重なり合っていると仮定すると、次のことができます。

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

）;

htmlが次のようなものであると仮定します（sameAbsolutePositionはcssであり、同じ正確な場所に配置するため、position：absolute; left：20; top：20px;のようになります）：

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

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

于 2012-04-06T04:47:48.230 に答える
0

どこでフェードアウトしていますか？フェードインはdisplay:block不透明度を0から100に変更します。フェードアウトはdisplay:none不透明度を100から0に変更します。

一度フェードインすると、画像はdisplay:block100になり、不透明度は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');
                });
              }
            );
于 2012-04-06T04:49:40.017 に答える
0

はるかに優れた解決策：

この仕事をするためにjavascriptを忘れてください。代わりにCSSのスプライトを使用してください。フェードイン、フェードアウトを使用する場合は、トランジションを使用してください。

更新：以下のコメントに応えて、トッドのスプライトの寸法と位置を予測する方法がないため、コードを書くことができません。また、IE8とIE9で機能するためにはトランジションだけでなく、スプライトとトランジションを使用して「機能」を強化することをお勧めします。

于 2012-04-06T04:51:03.497 に答える
0

これで試してください

 $("#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');
          }
        );​

これがフィドルです

于 2012-04-06T04:52:12.597 に答える
0

トランジションを使用して、css3でこのクロスフェードを実行することもできます。すべてのブラウザで利用できるわけではありませんが、それでも... http://www.w3schools.com/css3/css3_transitions.asp

CSSと同様の方法：画像リンク、ホバーで変更

例えば：

#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');
}
于 2013-10-12T20:36:29.153 に答える
0

これで試してください 

         $(".image_hover").mouseover(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });
     $(".image_hover").mouseout(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });
于 2018-04-18T12:45:30.933 に答える