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。

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

我希望这个动作是同步的。请 - 有谁知道我怎么能做到这一点？

非常感谢。

编辑：无能的新手。非常感谢代码示例。

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

}

您也希望在开始淡入淡出之前等待加载新图像。（checkout jQuery doc用于正确的功能，并在加载回调中淡化图像）。

Answer 2

这是Ulflander的想法的实现，因为发布的代码不完整http://jsfiddle.net/8nBqD/1/

诀窍是绝对将第二张图像置于你渐渐淡出的图像之上

<强> HTML

<img id='pic1' src="http://periodictable.com/Samples/009.3b/s7.JPG" />
<img id='pic2' src="http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png" />

<强> CSS

#pic2 {
   position: absolute;
   display: none;
}

<强> JS

// Fade out the image, and replace it with the new one after the fade is over
$("#pic1").fadeOut(500, function() { // fadeout current image
    this.src = 'http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png';        
    $(this).show();
});

// Fade in the new image placing it on top of the original one
$("#pic2").offset($("#pic1").offset()).fadeIn(500, function(){
    // Hide it since we are showing the original image with the new src        
    $(this).hide();
});

我们甚至可以编写一个插件来轻松重用

(function($) {
    $.fn.imageFader = function(newSrc, seconds) {
        $(this).each(function() {
            var $img = $(this);
            $img.fadeOut(seconds, function() {
                this.src = newSrc;
                $img.show();
            });
            var $tempImg = $('<img src="'+newSrc+'" style="position:absolute;display:none;" />').appendTo('body');
            $tempImg.offset($img.offset()).fadeIn(seconds, function(){
                $tempImg.remove();
            });
        });
    };
})(jQuery);

并像http://jsfiddle.net/8nBqD/5/

一样使用它

$('img').imageFader('picture.png', 1000);

jQuery fadein和fadeout同时出现

2 个答案: