更改图像源和不透明度jquery问题

Question

我有一个div，其中包含b＆amp; w图像旁边的文字。整个div设置为50％不透明度。将鼠标悬停在此div上时，我想将不透明度更改为100％，同时还要更改图像的来源（从b＆amp; w one到颜色）。功能很好;然而，当它徘徊时，不透明度会在之前稍微改变图像源发生变化，而且看起来确实有点时髦。我已经尝试过预加载图像，但这似乎没有改变任何东西 - 在更改img源时仍有轻微的延迟。

这是我的代码看起来像（图像具有几乎相同的源，只是后缀不同，因此看起来很奇怪的代码）：

$('.character').on('mouseenter', function() {
    var full_src = $(this).find('img').attr('src');
    var half_src = full_src.split("-");
    $(this).find('img').attr('src', half_src[0] + '-color.png');
    $(this).css('opacity', 1);
});

$('.character').on('mouseleave', function() {
    var full_src = $(this).find('img').attr('src');
    var half_src = full_src.split("-");
    $(this).find('img').attr('src', half_src[0] + '-bw.png');
    $(this).css('opacity', .5);
});

有什么想法吗？提前谢谢。

编辑：把小提琴放在一起：http://jsfiddle.net/3WZ7J/ - 大部分时间似乎都能正常工作，我的图片可能太大或者没有正确预装。

Answer 1

您可以在更改div

的不透明度之前等待图片加载

$('.character').on('mouseenter', function() {
    var $this = $(this);
    var full_src = $this.find('img').attr('src');
    var half_src = full_src.split("-");
    $this.find('img').load(function(){
        $this.css('opacity', 1);
    }).attr('src', half_src[0] + '-color.png');
});

FIDDLE

Answer 2

您可以尝试的一件事是.promise（）强制执行操作的顺序，以便在图像换出之前不透明度不会改变。这里有一些信息：http://api.jquery.com/promise/