0

我目前使用以下内容来淡化我网站上的图像：

$(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就是一个例子。

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

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

非常感谢。

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

4

2 回答 2

2

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 文档以获得正确的功能，并在加载回调中淡化图像）。

于 2012-12-06T00:18:37.627 回答
0

这是 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);
于 2012-12-06T00:37:06.460 回答