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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Jquery Fade Effect

    Hi,

    I'm trying to do a simple image cycle but I want to add either a fade or slide effect it. I've got a <div id#home-image-container"> which is basically the middle section of my page with a background image and it cycles through 3 different backgrounds.

    Here is the code I'm using:

    Javascript
    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript">
    jQuery( function( $ ) {
        var images = [ "images/background-02.jpg", "images/background-03.jpg" ];
        var currentImage = 0;
    
        function changeBackground() {
            $( '#home-image-container' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
            if ( currentImage >= images.length - 1 ) {
                currentImage -= images.length;
            }
        }
    
        setInterval( changeBackground, 5000 );  
    });
    </script>
    And the DIV
    Code:
    <div id="home-image-container" style="width:100%; height:690px; background-image:url(images/background-01.jpg); background-position:center; background-repeat:no-repeat; overflow:hidden;">
    It works fine right now, but it just changes the background after a few seconds.. I want to add a fade or slide transition to the 3 backgrounds.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You can't fade the background-image, unless you fade the whole div with it. Better to use images and then fade them. Have a look at this for an approach to crossfading the images.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Perfect, I went the image route and have it working! Thanks.


  •  

    Posting Permissions

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