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

Question

我一直在尝试将 Jquery 用于 fadeOut 仅通过内联样式而不是 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/