0

誰かが画像上でマウスをロールオーバーしたときに画像を置き換えるjqueryスクリプトがあります。

フェードで変えたい。

私は何をする必要がありますか？

ありがとう！

<img src='images/dogySitter_s.png' alt='' id='first'  />



<script  type='text/javascript'>
$(document).ready(function(){
    $("#first").hover(
        function() {$(this).attr("src","images/dogySitter_c.png");},
        function() {$(this).attr("src","images/dogySitter_s.png");
    });
});
</script>
4

2 に答える 2

0

これにより、要素がフェードアウトし、画像が交換され、要素がフェードインされます (不透明度をアニメーション化すると、要素がフェードアウトしたときに mouseleave がトリガーされる問題を回避できます)。

$(document).ready(function(){
    $("#first").on({
        mouseenter: function() { 
            $(this).animate({opacity: 0}, 400, function() { 
                $(this).attr('src', 'images/dogySitter_c.png')
                       .animate({opacity: 1}, 400);
            });
        },
        mouseleave: function() {
            $(this).animate({opacity: 0}, 400, function() { 
                $(this).attr('src', 'images/dogySitter_s.png')
                       .animate({opacity: 1}, 400);
            });
        }
    });
});

クロスフェードには2つの要素が必要です

于 2013-08-23T22:37:47.860 に答える
0

adeneoの答えは、fadeOut関数のコールバックとしてfadeIn関数を提供します。これは、画像をフェードアウトさせてから、もう一方の画像をフェードインさせたい場合に最適です。

フェードを同時に発生させたい場合は、CSS トリックを使用して非表示の画像の上に非表示の画像を配置してから、fadeIn と fadeOut の両方を次々に呼び出す必要があります。すべての jQuery アニメーションは非同期で実行されるため、同時に発生します。

詳細については、fadeOut のこちら ( http://api.jquery.com/fadeOut/ ) を参照してください。

于 2013-08-23T22:40:35.960 に答える