How to make jQuery animation for body of html?
<p>I am making a website and I'm trying to add three images to the web page and make them rotate with jQuery. I have read a lot of several threats about jQuery :not() function for excluding child elements from animation but can't get it do it  the right way. The problem is that I only need the 3 background images( wich are attached to ) to fade in and not all other elements too like menu, header or site content. Here is my code, hope someone can help me.</p>

<pre><code>&lt;script type="text/javascript"&gt;
 $(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 &lt; 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);

 }

 });

&lt;/script&gt;
</code></pre>

<p>What I need is to animate only the body background to fade in and not the child elements of it
like menus, paragraphs, site content, etc.
Thanks for any suggestions.</p>

<p>The Html part:</p>

<pre><code>&lt;div class="parent"&gt;
 &lt;div class="inline_element1"&gt;Here goes menu&lt;/div&gt;
   &lt;div class="inline_element2"&gt;Here goes site content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In the CSS part:</p>

<pre><code>.parent{

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

<p>I need to animate only the  and not all the elements inside too like and . Thanks in advance.</p>
