Link to home
Start Free TrialLog in
Avatar of Sheritlw
SheritlwFlag for United States of America

asked on

jquery run function after settimeout

I have an animation that runs great, but now I'm trying to reverse this animation by fading out the text and then running another function. Upon this page being loaded the following runs...

 $(document).ready(function () {

      dream();
      setTimeout(runul(), 8000, function() {showVideo()});

    });

Open in new window

The dream function creates bubbles on the body background.

 function dream() {
        //calculating random color of dream
        if (animation_stopped) return;
        var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';

        //calculating random X position
        var x = Math.floor(Math.random() * $(window).width());

        //calculating random Y position
        var y = Math.floor(Math.random() * $(window).height());

        //creating the dream and hide
        drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();

        //appending it to body
        $(document.body).append(drawingpix);

        //styling dream.. filling colors.. positioning.. showing.. growing..fading
        drawingpix.css({
            'background-color': color,
            'border-radius': '100px',
            '-moz-border-radius': '100px',
            '-webkit-border-radius': '100px',
            top: y - 14,    //offsets
            left: x - 14 //offsets
        }).show().animate({
            height: '500px',
            width: '500px',
            'border-radius': '500px',
            '-moz-border-radius': '500px',
            '-webkit-border-radius': '500px',
            opacity: 0.1,
            top: y - 250,    //offsets
            left: x - 250
        }, 3000).fadeOut(2000);

        //Every dream's end starts a new dream
         window.setTimeout('dream()', 200);
    }

Open in new window


While the dream function is running, I run the runul() function, which starts typing text.

 function runul() {
        jQuery("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");

        // Trigger events
        jQuery(".stop").click(function () {
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function () {
            jQuery("#ticker").trigger("play");
            return false;
        });

    }

Open in new window


When the runul() animation is completed I would like to run the showVideo function. I want this function to fadeout the typed text and then fadein the iframe wrapped in a div.

 function showVideo() {
        $('#divFade').fadeOut(3000);
        animation_stopped = true;
        $(typetext).css('color', 'black');
        $("body").animate({ backgroundColor: "#ffffff" }, 3000);
        $('#divVideos').fadeIn('slow');
       // Animation complete.
        $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
        return false;
      };

Open in new window

How can I get the showVideo to run after the runul() is completed?

Thanks so much for your help
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

hopefully there could be something in your ticker plugin which would run a function when the ticker has completed??

Where did you get that ticker plugin from?
Avatar of Sheritlw

ASKER

I got it at http://www.thepixelart.com/create-a-typing-text-effect-using-jquery/

I am just learning jQuery so I'm not sure what to look for.

Thanks for your help
Hi,

I think you want to implement that using method/event chaining. Please look at this, it may help you Jquery Chaining. If you want to familiarize more on using jquery, you can visit their website as well or the link that I had given to you.
I looked at the Chaining, but I don't think that is what I need.  I need to run the showVideo() function after the runul() function has completed.
I was provided an example of using deferred, but I don't understand it yet.
I am taking some jQuery courses on learndevnow, but I haven't found an example on the videos I'm watching.
function runul() {
  var dfd = $.Deferred();
  
  someAsynchronousMethod(function() {
    // callback of asynchronous method
    dfd.resolve();
  });
  
  return dfd.promise();
}

Open in new window


Thanks for your help
You have too many open questions with the same issue.

You do not read the comments I already gave

This is not valid JavaScript because setTimeout does not have a callback

      setTimeout(runul(), 8000, function() {showVideo()});

And runul may NOT have () when not in quotes!!

setTimeout(runul, 8000);
Will run runul in 8 seconds. Your code will run it immediately.

How about this, assuming runul takes 20 seconds to run


var tid1 = setTimeout(runul, 8000)
var tid2 = setTimeout(showVideo,28000);
This
var tid1 = setTimeout(runul, 8000)
var tid2 = setTimeout(showVideo,28000);

was the very first thing I tried.  That didn't work, that is when I started my search for a solution.
I do have a lot of questions out there because I've been set back 1 week trying to get this to work.
I figured since I pay for this site and have for years, I might be able to get help.
give this a shot:

<script>
            $(function(){
                 var animation_stopped = false;
                 dream();
                 setTimeout(function(){
                    obj.done(function(  ) {
                        obj.one(); 
                    }).two( ); 
                 }, 5000);
                 
                
                var obj = {
                        one: function(){
                           runul();
                        },
                        two: function(){
                           showVideo();
                        }
                },
                // Create a Deferred
                defer = $.Deferred();

                // Set object as a promise
                defer.promise( obj );

                // Resolve the deferred
                defer.resolve( );

                
                
                
                function dream() {
                        //calculating random color of dream
                        if (animation_stopped) return;
                        var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';

                        //calculating random X position
                        var x = Math.floor(Math.random() * $(window).width());

                        //calculating random Y position
                        var y = Math.floor(Math.random() * $(window).height());

                        //creating the dream and hide
                        drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();

                        //appending it to body
                        $(document.body).append(drawingpix);

                        //styling dream.. filling colors.. positioning.. showing.. growing..fading
                        drawingpix.css({
                            'background-color': color,
                            'border-radius': '100px',
                            '-moz-border-radius': '100px',
                            '-webkit-border-radius': '100px',
                            top: y - 14,    //offsets
                            left: x - 14 //offsets
                        }).show().animate({
                            height: '500px',
                            width: '500px',
                            'border-radius': '500px',
                            '-moz-border-radius': '500px',
                            '-webkit-border-radius': '500px',
                            opacity: 0.1,
                            top: y - 250,    //offsets
                            left: x - 250
                        }, 3000).fadeOut(2000);

                        //Every dream's end starts a new dream
                        window.setTimeout('dream()', 200);
                    }
                    
                    function runul() {
                        jQuery("#ticker").ticker({
                            cursorList: " ",
                            rate: 50,
                            delay: 18000
                        }).trigger("play").trigger("stop");

                        // Trigger events
                        jQuery(".stop").click(function () {
                            jQuery("#ticker").trigger("stop");
                            return false;
                        });

                        jQuery(".play").click(function () {
                            jQuery("#ticker").trigger("play");
                            return false;
                        });
                            $("#one").animate({"left":400});
                            

                    }
                    
                    function showVideo() {
                        $('#divFade').fadeOut(3000);
                        animation_stopped = true;
                        $(typetext).css('color', 'black');
                        $("body").animate({ backgroundColor: "#ffffff" }, 3000);
                        $('#divVideos').fadeIn('slow');
                    // Animation complete.
                        $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
                        return false;
//

                        };
                    });
        </script>

Open in new window

Nothing runs now.  Do you want me to upload this?

Thanks for your help
Since I don't have your complete code, there may be erros I can't foresee. Please post a link.
This page is at http://styliststudioinc.com/start.html

I did have all functions wrapped under document.ready as in your example, but took it out after it didn't work.
I do clear cache/refresh etc.

Thanks
#divVideos or #iVideos divs do not exist on your page. So you are trying to load something into a div that doesn't exist.

That's the forst problem.
Wow, you are right.  I was trying so many different things, I must have deleted it by accident.
I added the iframe (iVideos) and the div back in.  I uploaded the changes.

Thanks
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you so much for your help.
This works great!
Really helped me a lot.
Thank you again.
Great, you got it :)
Please close all your questions related to this.

Please do realise that we are all volunteers and do this because we want to help. I even tweeted the ticker author to see if I could get him to add a callback to his no longer supported script.

When I post suggestions (several times) and I see they are ignored, I do however lose some enthusiasm for the question(s)

Anyway, it seems you got your solution.

Good luck
Again, thank you so much!  I really do appreciate your help.