Jump to content

JQuery image rotator fading other divs


bravo14

Recommended Posts

Hi 

 

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">
            $(document).ready(function(){
                
                var imgArr = new Array( // relative paths of images
                'http://176.32.230.29/hmximages.co.uk/photos/5.jpg','http://176.32.230.29/hmximages.co.uk/photos/3.jpg','http://176.32.230.29/hmximages.co.uk/photos/4.jpg','http://176.32.230.29/hmximages.co.uk/photos/2.jpg','http://176.32.230.29/hmximages.co.uk/photos/1.jpg',                '_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);
                }

            });
    </script> 

 

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">
                <ul>
             <li><a href="http://176.32.230.29/hmximages.co.uk/" class="active">Home</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/#">Support</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/checkout.php?step=1">Checkout</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/cart.php?action=view">Cart</a></li>
<li><a href="http://176.32.230.29/hmximages.co.uk/profile.php">My Account</a></li>
             <li><a href="http://176.32.230.29/hmximages.co.uk/#">Contact</a></li>
            </ul>
</div>
<img src="files/image/logo.png"/>
<!-- end #header -->
</div>

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.