无法在 jQuery 中淡入淡出背景图像？解锁解决方案-css教程-PHP中文网

无法在 jQuery 中淡入淡出背景图像？解锁解决方案

Barbara Streisand

发布： 2024-10-23 18:08:02

原创

535 人浏览过

Can't Fade Background Image in jQuery? Unlock the Solution

无法在 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不能直接淡出背景图片。要解决此问题，请使用无法在 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中文网其他相关文章！