淡出和淡入到同一元素的另一个图像

Question

我写了一个代码，使用此js函数淡入和淡出图像：

 function fade(){
 $('#image').fadeOut(500);
  setTimeout(function () { showNew(img); }, 500);
  $('#image').fadeIn(500);
}   
 <img src="#" id="image" height="500" width="auto">    

但是它会淡入白色背景，然后下一个图像也会从白色背景淡入。 我需要一个使图像淡入另一张图像而不是背景的功能

Answer 1

没有jQuery函数。

我通常要做的是使用CSS将图像彼此放在一起，并使背景色保持透明。 然后，当您淡出正面的图像时，它看起来像会淡入另一个具有z-index和绝对位置的图像：

.image-front {
   position:absolute;
   top:0;
   left:0;
   z-index:2;
}

.image-back {
   position:absolute;
   top:0;
   left:0;
   z-index:1;
}

这是一个简单的示例： http : //jsfiddle.net/bullfrogg/Wc6Yu/1/对于您的情况：只需将背景设置为透明并在div中放置图像即可。

Answer 2

您真正需要的是图像之间的淡入淡出。 为此，可以使用z-index属性并将两个图像堆叠在一起。 然后，您可以简单地淡出上面的一个。

这是一个示例，可以帮助您http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Answer 3

我开发了一种非jQuery的javascript，用于将变化的图像构建到妻子的网站中。 （自我促销） beatricehamblett.com （/自我促销）

脚本如下：

    // You need to style the css for the image as follows: 
#image1{visibility:hidden};
    //-->


function fadeIn(objId,opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 2;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}

function initImage() {
    imageId = 'image1';
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,0);
}

function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}


window.onload = function() {
initImage();
};

它可以根据需要多次使用，以提供多个图像