0

Joomla サイトにいくつかの画像があり、それぞれに白黒バージョンとカラー バージョンがあります。素敵なクロスフェードでホバーしたときに、src の一部 (「bw」から「color」) を変更したいと思います。私は jQuery に非常に慣れていないので、私が持っている唯一のコードはこれです。これはおそらく完全に間違っています。

$(".grey img").mouseover(function() {
$(this).attr('src', function(i, src) {
    return src.replace( 'bw', 'color' ).fadeIn(800);
});
$(".grey img").mouseout(function() {
    $(this).attr('src', function(i, src) {
        return src.replace( 'color', 'bw' ).fadeOut();
});

私は何時間も解決策を探してきましたが、現時点では、それが本当に明らかであるかどうかはわかりません。完全に見逃しています。そうである場合、またはどこかに解決策があり、十分に調べていない場合は申し訳ありません。

HTMLで2つの画像をリンクせずにこれを解決したいのですが、他に解決策がない場合は、これを達成する方法に関するヒントをいただければ幸いです。

4

1 に答える 1

0

ソースを変更する前に、最初にソースを取得する必要があります。また、少しクリーンアップします。

$('.grey').on({
    mouseenter:function(){
        var $this = $(this),
            src = $this.attr('src').replace('bw','color');

        $this.fadeOut(function(){
            $this
                .attr('src',src)
                .on('load',function(){
                    $this.fadeIn();
                });
        });
    },
    mouseleave:function(){
        var $this = $(this),
            src = $this.attr('src').replace('color','bw');

        $this.fadeOut(function(){
            $this
                .attr('src',src)
                .on('load',function(){
                    $this.fadeIn();
                });
        });
    }
},'img');

ご覧のとおり、正しい軌道に乗っていましたが、操作する前にソースをキャプチャする必要があります。私が行った他の変更は次のとおりです。

  • which を使用.on()すると、単一のバインド イベントが可能になります
  • mouseenterandmouseleaveの代わりにmouseoverandを使用するmouseout
  • に含まれる.on()すべての人に割り当てを委任するimg.grey

また、読みやすさのために変数を使用しました$(this).attr('src').replace('bw','color')が、代入に を簡単に配置して、変数を完全に放棄することもできます。

編集- 画像の変更時にフェードイン/フェードアウトを表示するように更新。

于 2013-04-24T22:09:36.237 に答える