Jump to content

JQuery image rotator fading other divs


Recommended Posts



I have a jquery function that is rotating a number of images at the top of the page, the jquery function is below


<script language="javaScript" type="text/javascript">
                var imgArr = new Array( // relative paths of images
                '','','','','',                '_img/homepage/4.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, 6000);
                function changeImg(){
                    $('#header').animate({opacity: 0}, 1000, function(){
                        $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') bottom center no-repeat');
                    }).animate({opacity: 1}, 1000);



However when the background images fade in and out it also fades other items and div tags within the header container.



<div id="header">
<div id="navigation">
             <li><a href="" class="active">Home</a></li>
             <li><a href="">Support</a></li>
             <li><a href="">Checkout</a></li>
             <li><a href="">Cart</a></li>
<li><a href="">My Account</a></li>
             <li><a href="">Contact</a></li>
<img src="files/image/logo.png"/>
<!-- end #header -->


How can I change this so that it only fades the background image and not the navigation and the logo image?



Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.