如何使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？

回答

相关问题