2017-12-25 14 views
-2

背景から背景までのjQuery背景フェーダーが必要です。jQueryコードを変更して背景画像をフェードするCSSのみ

私は外出する基地を持っていますが、成功しませんでした。

私はすべての適切なライブラリを含んでいます、私はトリプルチェックしました。あなたがに/フェードアウトしたい場合は<img>要素を使用する必要が

//Array of images which you want to show: Use path you want. 
 
    var images = new Array('img/bg_0.jpg', 'img/bg_1.jpg', 'img/bg_2.jpg'); 
 
    var nextimage = 0; 
 
    doSlideshow(); 
 

 
    function doSlideshow() { 
 
    if (nextimage >= images.length) { 
 
     nextimage = 0; 
 
    } 
 
    $('.face') 
 
     .css('background-image', 'url("' + images[nextimage++] + '")') 
 
     .fadeIn(500, function() { 
 
     setTimeout(doSlideshow, 1000); 
 
     }); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="face" style="background-image: url('img/bg_5.jpg');" class="face"> 
 
    <div class="face-body"> 
 
    <div class="container text-center"> 
 
     <h1 class="face-title one"> 
 
     <?php echo SRV_NAME; ?> 
 
     </h1> 
 
     <h2 class="face-subtitle"> 
 
     <?php echo SRV_SLOGAN; ?> 
 
     </h2> 
 
    </div> 
 
    </div> 
 
</section> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>

+0

は、以下のスニペットを見てください。あなたのコードで '.fadeIn()'は '.face'要素全体に影響を与えます...子要素(内側のdiv、h1とh2)を含みます。通常の ''要素を使用して、 'position:absolute'と' z-index'を探してください。 –

+0

sooo私は何を提案していますか?私はjQuery自体、特にこの状況では、多くの経験を持っていません –

答えて

0

。 背景をアニメーション表示することはできません。要素だけができます。背景は要素ではなく、要素のプロパティです。

私がここで提案するのは、背景のアイデアを取り除き、絶対位置付けされたイメージ要素を使用することです(バックグラウンドのようにテキストの後ろに置くことです)。あなたは要素のちょうど背景をフェードすることはできません

//Array of images which you want to show: Use path you want. 
 
var images = new Array('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg', 'https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781', 'https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg'); 
 
var nextimage = 0; 
 
doSlideshow(); 
 

 
function doSlideshow() { 
 
    if (nextimage >= images.length) { 
 
    nextimage = 0; 
 
    } 
 
    $('.face') 
 
    .fadeOut(500,function(){ 
 
    $(this).attr('src', images[nextimage++]) 
 
     .fadeIn(500, function() { 
 
     setTimeout(doSlideshow, 1000); 
 
    }); 
 
    }); 
 
}
.face{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    z-index:-1; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="face"> 
 
    <img src="https://www.petmd.com/sites/default/files/what-does-it-mean-when-cat-wags-tail.jpg" class="face"> 
 
    <div class="face-body"> 
 
    <div class="container text-center"> 
 
     <h1 class="face-title one"> 
 
     NAME 
 
     </h1> 
 
     <h2 class="face-subtitle"> 
 
     SLOGAN 
 
     </h2> 
 
    </div> 
 
    </div> 
 
</section>

関連する問題