2

我一直在尝试fadeOut仅将 Jquery 用于通过内联样式而不是 CSS 声明的 div 中的背景图像。例如：

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

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

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

我在用着：

  • jQuery 1.8.3
  • 现代化 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 类，当然，在视频加载时使第一帧/移动图像褪色也不起作用。

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

4

1 回答 1

0

一种方法是创建一个图像以定位在 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/

于 2013-01-25T23:22:51.057 回答