Question

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

Answer 1

您必须先获取源，然后才能进行更改。我也会稍微清理一下：

$('.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()
使用mouseenter和mouseleave代替mouseover和mouseout
将.on()个作业委派给img

.grey

此外，我使用了一个变量来保持阅读的清晰度，但你可以轻松地将$(this).attr('src').replace('bw','color')放在作业中并完全放弃变量。

编辑 - 已更新，可在图片更改时显示fadeIn / fadeOut。

jQuery src在悬停时替换crossfade

1 个答案: