jQuery to FadeOut 由 HTML 内联样式声明的背景图像

Question

我一直在尝试使用 Jquery 淡出 仅通过内联样式而不是 CSS 声明的 div 中的背景图像。例如:

<div class="big-video-wrap-image" style="background:url(images/image1.jpg) repeat;">

我应该如何对 div 类的背景样式应用淡出效果，以便 div 保留但只有背景图像消失(通过淡出)。

---

可能是不必要的信息:分享我想要这样做的目的会带来一些额外的问题，但我希望分享这些细节能够描绘出我正在做的事情的完整画面。

我正在使用:

• Jquery 1.8.3
• Modernizr 2.6.2
• 第 2.9 周期
• 缓和 1.3
• 漂亮照片
• 具有所有依赖库的 BigVideo.js。

BigVideo.js在网站(或理论上任何 div)的背景中显示动态大小的视频。

但它不适用于移动设备。所以我使用 Modernizr 检查设备，所以运行 BigVideo.js 的脚本设置如下:

var BV = new $.BigVideo();
if (Modernizr.touch) {
} else {
    BV.init();
    BV.show($('.big-video-play').attr('data-video'),{altSource:$('.big-video-play').attr('data-video2')});
    $(".big-video-wrap-image").attr('[style*="background"]') /*No idea what should be on this line*/

}

这样的 html:

<div class="big-video-wrap big-video-play" data-video="vids/vid1.mp4" data-video2="">
<div class="big-video-wrap-image" style="background:url(images/ally1.jpg) repeat;">

和外部 CSS 本身:

.big-video-wrap {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.big-video-wrap-image {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}

这用于响应式网站布局。这就是它现在的设置方式，bigvideo.js 将视频放在主体 div 的顶部而不是正确的 div 类，当然，在视频加载时使第一帧/移动图像淡出也不起作用。

非常感谢您的帮助。谢谢。

Answer 1

一种方法是创建一个图像以定位在 div 上。然后去掉背景样式并淡出图像。

var $imageDiv = $(".big-video-wrap-image"),
    bgUrl     = $imageDiv.css('background-image').split('(')[1].replace(')', '') //Should probably be done in another way, feel free to fill in anyone,
    imgDummy  = new Image();

imgDummy.onload = function () {
    $(this).addClass('dummyImg').insertBefore($imageDiv).fadeOut();
    $imageDiv.removeAttr('style');
};

imgDummy.src = bgUrl;

http://jsfiddle.net/tbleckert/SkQ2Y/1/