javascript - jQuery 同时淡入和淡出

Question

我目前使用以下方法来淡化网站上的图像:

$(document).ready(function() {
    $('ul.image-switch li').mouseover(function(e) {
    if (e.target.nodeName.toLowerCase() == 'a') return;

    var image_src = $('a', this).data('image');
    var img = $('.image-container img');

    if (img.attr('src') != image_src) { // only do the fade if other image is selected
        img.fadeOut(200, function() { // fadeout current image
            img.attr('src', image_src).fadeIn(200); // load and fadein new image
        });

    }
});
});​

一个实际的例子是 http://www.sehkelly.com/#news .

如您所见，当前图像必须在新图像淡入之前淡出。

我希望 Action 能够同时进行。请问——有谁知道我怎样才能做到这一点？

非常感谢。

编辑:无知的新手。非常感谢代码示例。

Answer 1

在实际元素之上创建一个新的 img 元素，然后淡入此新图像。您需要一些 CSS 来将新图像放在旧图像之上。

仅用一个 img 元素是不可能做到这一点的。

if (img.attr('src') != image_src) { // only do the fade if other image is selected
    img.after(
        $('<img />').attr('src', image_src).fadeIn(200)
    );
    img.fadeOut(200);

}

您可能也想在开始淡入淡出之前等待新图像加载。 (查看 jQuery 文档以获取正确的函数，并在加载回调中淡入淡出图像)。