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

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

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

3 个答案: