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 中链接两个图像，但如果没有其他解决方案，我将感谢有关如何实现此目标的任何提示。

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');

如您所见，您走在了正确的轨道上，但您只需要捕获源代码，然后就可以对其进行操作。我所做的其他更改是：

  • 使用.on()which 允许单个绑定事件
  • 使用mouseenterandmouseleave代替mouseoverandmouseout
  • 将任务委派.on()给所有img包含在.grey

我还使用了一个变量来保持阅读的清洁度，但您也可以轻松地将 放在$(this).attr('src').replace('bw','color')赋值中并完全放弃该变量。

编辑- 更新以在图像更改时显示淡入/淡出。

于 2013-04-24T22:09:36.237 回答