0

我正在制作一个网站，我正在尝试向网页添加三个图像并使用 jQuery 使它们旋转。我已经阅读了很多关于 jQuery :not() 函数的威胁，用于从动画中排除子元素，但无法以正确的方式做到这一点。问题是我只需要 3 个背景图像（附加到）来淡入，而不是所有其他元素，如菜单、标题或网站内容。这是我的代码，希望有人可以帮助我。

<script type="text/javascript">
 $(document).ready(function()
    {
 var imgArr = new Array() // relative paths of images
 imgArr[0]="images/1.jpg";
 imgArr[1]="images/2.jpg";
 imgArr[2]="images/3.jpg";


 var preloadArr = new Array();
 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, 1000);

 /* image rotator */
 function changeImg(){
 $(".wrapper").not('dont know').animate({opacity: 0}, 1000, function(){
 $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
 }).animate({opacity: 1}, 1000);

 }

 });

</script>

我需要的是只为身体背景设置动画以淡入，而不是像菜单、段落、网站内容等子元素。感谢您的任何建议。

Html部分：

<div class="parent">
 <div class="inline_element1">Here goes menu</div>
   <div class="inline_element2">Here goes site content</div>
</div>

在 CSS 部分：

.parent{

width: 100%;
height: 100%;
margin: 0px auto;
background-image: url(../images/1.jpg);
background-repeat: no-repeat;
background-size: cover;
}

我只需要对里面的元素进行动画处理，而不是对里面的所有元素进行动画处理。提前致谢。

4

1 回答 1

0

如果我理解，您需要对父级的背景进行动画处理和淡化，同时不淡化里面的内容。这根本是不可能的，我的意思是，如果你删除一个（或淡入/淡出或你在它上面做的任何事情），你会同时删除他所有的孩子，因为它在同一个容器中。这就是创建 DOM 的方式。知道这一点，仍然有办法“伪造”背景图像，例如父级内部的 DIV，位置绝对，顶部 0 和左侧 0（父级必须是相对的），高度和宽度为 100%，z-索引为 -1（确保它在所有内容的后面）。比你可以简单地淡入/淡出那个特定的 div。

<div class="parent">
 <div class='fakeBackground'></div>
 <div class="inline_element1">Here goes menu</div>
 <div class="inline_element2">Here goes site content</div>
</div>

.parent {
   width: 100%;
   height: 100%;
   margin: 0px auto;
   position: relative;

}   
.parent .fakeBackground {
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0px auto;
   background-image: url(../images/1.jpg);
   background-repeat: no-repeat;
   background-size: cover;
}

接着：

// you have to figure out yourself how to point the parent, or if it is all at the same 
// time, just go with $('.fakeBackground').fadeOut(1000, etc.)
$('.parent').children('.fakeBackground').fadeOut(1000,function() {
  // change background like you want
});
于 2012-06-29T21:04:19.317 回答