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
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fading a Changing DIV

    Currently I am creating a script, that will cycle through an array of testimonials, display each one for 15 seconds, and then moving on to the next one.

    I have this working properly. I would like to add a fade in / out for every testimonial, however, I have not succeeded at doing that.
    Using the fadeIn / fadeOut jQuery functions, I can fade the first testimonial in and out without any problems; however, the second one never fades in.

    I have tried using functions written online, with the same result.

    Any help is appreciated, as I am only just starting to learn JavaScript / jQuery.

    (Here is my code, with all fades removed):

    Code:
    <html>
            <head>
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                    <script type='text/javascript'>
                   
                            $(document).ready(function() {
                                    var testimony = new Array("It's amazing!", "It's so amazing!", "It's more amazing!", "It's the most amazing!");
                                    var count = testimony.length;
                                    var number = Math.floor(Math.random()*count);
                                   
                                    function countdown() {
                                            setTimeout(countdown, 15000);
                                            $('#header').html(testimony[number]);
                                            number = Math.floor(Math.random()*count);
                                    }
                                    countdown();
                            });
                   
                    </script>
            </head>
            <body>
                    <div id='header'></div>
            </body>
    </html>

  • #2
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    660
    Thanks
    31
    Thanked 100 Times in 94 Posts
    Well it's hard to bug test your problem when the problem has been removed .

    From looking at it the following should work. If it doesn't work it would be helpful to know if you're getting any Javascript errors (either from FireBug or Chrome's Inspect Element Error Console).

    Code:
    function countdown() {
         setTimeout(countdown, 15000);
         $('#header').fadeOut( 'slow', function() {
              $('#header').html(testimony[number]);
              $('#header').fadeIn( 'slow' );
         });
         number = Math.floor(Math.random()*count);
    }
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com

  • Users who have thanked ShaneC for this post:

    Sloth Script (01-25-2011)

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!

    That fixed the problem;
    Originally I had been fading seperate from my actual function, and that was why it was not working (or so I figure!)


  •  

    Posting Permissions

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