0

私はウェブサイトを作成しており、ウェブページに 3 つの画像を追加して 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

私が理解している場合は、内部のコンテンツをフェードさせずに、親の背景をアニメーション化およびフェードする必要があります。これは単純に不可能です。つまり、a (または、fadeIn/fadeOut など) を削除すると、同じコンテナー内にあるため、すべての子を同時に削除することになります。それが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 に答える