如何使jQuery的背景幻燈片隻影響父div？

我一直試圖弄清楚這一整天，並繼續在圈子中運行。我有兩個問題希望得到幫助。 第一個：我有一個jquery背景幻燈片顯示內部div。問題是，當背景淡出來介紹新的圖像時，背景所指的DIV的孩子也是這樣，我不想那樣。你可以看到它at my website here我怎樣才能隔離父DIV，使孩子不會淡出？下面是幻燈片代碼：如何使jQuery的背景幻燈片隻影響父div？

<script language="JavaScript" type="text/javascript"> 
    $(document).ready(function(){  
     var imgArr = [ // relative paths of images 
      'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/1.jpg', 
      'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/2.jpg', 
      'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/3.jpg', 
      'http://www.ind-mediagroup.com/wp-content/themes/twentyeleven/indeximg/4.jpg' 
     ];  

    var preloadArr = []; 
    var i;  

    /* preload images */ 

    for(i=0; i < imgArr.length; i++){ 
     preloadArr[i] = new Image(); 
     preloadArr[i].src = imgArr[i]; 
    }  

    var currImg = 1; 
    var intID = setInterval(changeImg, 6000);  

    /* image rotator */ 

    function changeImg(){ 
     $('#centerdiv').animate({opacity: 0}, 1000, function(){ 
      $(this).css('background','url(' + 
       preloadArr[currImg++%preloadArr.length].src +') center fixed no-repeat'); 
     }).animate({opacity: 1}, 1000); 
     $('#centerdiv').css({'background-size': '100% 100%'}); }  
    }); 

</script>

這裏是CSS有關的問題（我知道很多的，可能是多餘的）：

#centerdiv { 
    width:100%; 
    height: 642px; 
    background-color: #333333; 
    background-image:url('http://www.ind-mediagroup.com/wp- content/themes/twentyeleven/indeximg/houston-night.jpg'); 
    background-repeat: no-repeat;/* i believe the next few lines are dealt with in the jquery code*/ 
    background-size: 100% 100%; 
    background-position: center; 
    background-attachment: fixed; 

    top:0px; 
    padding-top: 55px; 
} 

.contentdiv { 
    width: 78%; 
    height: 75%; 
    margin: auto auto auto 140px; 
    background-image: url('http://www.ind-mediagroup.com/wp- content/themes/twentyeleven/indeximg/whitetransbg.png'); 
    position: relative; 
    z-index: 10; 
}

這裏是HTML有關的問題：

<div id="centerdiv"> 
    <div class="contentdiv"> 
     <div class="wrappercontent"> 
      <div id="contentname"> 
       <p class="contentTextHeader">+<?php the_title() ?></p> 
      </div> 

      <div id="content"> 

       <?php 
        if (have_posts()) : 
         while (have_posts()) : 
          the_post(); 
          the_content(); 
         endwhile; 
        endif; 
       ?> 

      </div> 

      <div id="contentright"> 
       <?php echo apply_filters('the_content', get_post_meta($post->ID, 'page_image', true)); ?>  
      </div> 
     </div> 
    </div> 
</div>

二問題是這樣的：我想要的背景圖像，以填補DIV空間的100％。我設法得到這個在Chrome中加入工作：

$('#centerdiv').css({'background-size': '100% 100%'});

我不是一個jQuery的專家，所以我至今沒有專家，我不知道，如果前面的代碼是即使是正確的，但在其他瀏覽器，它給了我一個奇怪的效果。它會顯示較大的圖像，並在顯示正確尺寸的圖像後立即顯示。使用現有的jQuery代碼，有沒有辦法做到這一點？

我真的很感激任何幫助。我非常接近我想要的地方。

來源

2012-04-21 soccerprodigy777

你能也表現出一定的HTML片段reagrding你的問題？請將您的代碼格式化爲更好的可讀性。 – 2012-04-21 06:52:48

感謝您的迴應！我編輯的帖子添加相關的HTML ...希望這可以幫助...我不知道你想如何格式化代碼？ – soccerprodigy777 2012-04-21 07:43:17

你應該在沒有任何子元素的div上做背景圖片的動畫。正如你已經注意到的，孩子們也淡出了，但這是正常的行爲。 – 2012-04-21 08:33:30

contentdiv必須放置在centrediv之外。 contentdiv必須絕對定位一種疊加。我用軌道滑塊進行圖像滑動。

樣本HTML：

<style type="text/css"> 
    #centerdiv{ 
     border-radius: 3px; 
    } 
    #contentdiv{ 
     position: absolute; 
     top: 20px; 
     left:40px; 
     z-index: 300; 
    } 
</style> 

<body> 

    <div id="centerdiv"> 
     <img src="http://www.lorempixum.com/898/270/animals" alt="" /> 
     <img src="http://www.lorempixum.com/898/270/city" alt="" /> 
     <img src="http://www.lorempixum.com/898/270/food" alt="" /> 
     <img src="http://www.lorempixum.com/898/270/sports" alt="" /> 
    </div> 
    <div id="contentdiv"> 
      This is my text 
    </div> 
    <pre>Animals -> City -> Food -> Sports</pre> 
    <script type="text/javascript"> 
     $(window).load(
      function(){ 
       $('#centerdiv').orbit({ 
      'timer': true, 
      'advanceSpeed': 6000, 
      'bullets' : false, 
      'bulletThumbs': false, 
      });}); 
    </script> 
</body>

來源

2012-04-21 09:30:21

謝謝，我想我可能最終會使用軌道...你會如何解決第二個問題：背景圖片大小？ – soccerprodigy777 2012-04-21 13:06:50

請參閱[鏈接]（http://css-tricks.com/perfect-full-page-background-image/） – 2012-04-21 18:08:43

如何使jQuery的背景幻燈片隻影響父div？

回答

相關問題