2

私は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の緩和
  • prettyPhoto
  • すべての依存関係ライブラリを含むBigVideo.js。

BigVideo.jsは、動的なサイズのビデオをWebサイト（または理論的には任意の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の上部にビデオをスローします。もちろん、ビデオの読み込み時にfirstframe/モバイルイメージをフェードさせることも機能しません。

ヘルプは大歓迎です。ありがとうございました。

4

1 に答える 1

0

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/

于 2013-01-25T23:22:51.057 に答える