淡出和淡入到同一元素的另一個圖像

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

它可以根據需要多次使用，以提供多個圖像