無法在 jQuery 中淡入淡出背景圖片？解鎖解決方案

無法在 jQuery 中淡入淡出背景圖片？試試看

嘗試使用jQuery 淡入淡出背景影像時，多種方法已被證明不成功，包括：

var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}

解決方案：

這個問題的關鍵在於jQuery不能直接淡出背景圖。要解決此問題，請使用 ;標籤來表示您的圖像並最初使用 display: none; 隱藏它們。將它們的位置設為絕對並將 z-index 設為 -1 以模仿背景行為，強制它們出現在所有其他元素的後面。

以下是如何實現此效果的示例：

HTML:

<img src=".." />
<img src=".." />

CSS:

img{
  position:absolute;
  z-index:-1;
  display:none;
}

jQuery:

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
}
test();

A現場示範請上http://jsfiddle.net/RyGKV/。

以上是無法在 jQuery 中淡入淡出背景圖片？解鎖解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！