Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Please help stop my Javascript background slideshow cause it's child <div> to fade

    Hi guys,

    I have had a go at creating a Javascript background image slideshow and everything almost works as it should.

    The slideshow image is in one <div> and then within that there is another <div> which holds some text and a background image.

    As the background <div> fades in and out - the foreground <div> also fades up and down. I obviously do not want this!

    I hoped I could cure within my CSS by adding !important but all of the code is within the javascript and I am not sure how to amend it.

    Any help would be greatly appreciated. The code is below:

    JAVASCRIPT
    Code:
    <script>
    var images = Array("images/backgrounds/animation_home/slide1.jpg",
                       "images/backgrounds/animation_home/slide2.jpg",
                       "images/backgrounds/animation_home/slide3.jpg",
                       "images/backgrounds/animation_home/slide4.jpg");
    var currimg = 0;
    
    $(document).ready(function(){
       
        function loadimg(){
            
           $('#background').animate({ opacity: 1 }, 700,function(){
    
                //finished animating, minifade out and fade new back in           
                $('#background').animate({ opacity: 0.3 }, 700,function(){
                    
                    currimg++;
                    
                    if(currimg > images.length-1){
                        
                        currimg=0;
                        
                    }
                    
                    var newimage = images[currimg];
                
                    //swap out bg src                
                    $('#background').css("background-image", "url("+newimage+")"); 
                
                    //animate fully back in
                    $('#background').animate({ opacity: 1 }, 700,function(){
    
                        //set timer for next
                        setTimeout(loadimg,5000);
    
                    });
    
                });
            
            });
    
         }
         setTimeout(loadimg,5000);
      
    });
    </script>

    CSS
    Code:
    #background
    {
    	width:100%;
    	height:716px;
    	background-position:top center;
    	margin: 0 auto;
    	background-image:url(../images/backgrounds/animation_home/slide1.jpg);
    	background-repeat:no-repeat;
    	}
    HTML
    Code:
    <div id="background"></div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    I obviously do not want this!
    You tell us what it does. You don't tell us what you want it to do, Or not do.
    And I don't see text here anywhere.
    Last edited by sunfighter; 10-24-2013 at 04:59 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    You tell us what it does. You don't tell us what you want it to do, Or not do.
    And I don't see text here anywhere.
    Sorry - I guess that part was not very descriptive!

    I just want the background <div> to do the fade animation and the foreground <div> to stay solid ....

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,691
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Everything you have given us is for the background <div>. You do not give us HTML for the foreground <div> nor the js that is controlling it.

    Maybe just use the js code you have here and add foreground <div> to the HTML will do it.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •