Click here to Skip to main content
15,922,512 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am newbie at javascript.

I want to create some sequence actions, step by step. And so, let's imagine i have 10s Timeline intro for this web site below:

Steps
1. Show Logo
2. Show Web site name
3. show My name
#. and many many other actions ....

Here is my attempt
JavaScript
<script type="text/javascript">

  var bod = document.getElementById("_8d4a");
  var preTag = document.getElementById("style-text");
  var stand = document.getElementById("standby");

  setTimeout(function(){ bod.style.backgroundColor = "#000" }, 3000);
  setTimeout(function(){ preTag.style.left = "500px" }, 7000);
  setTimeout(function(){ preTag.style.left = "100px" }, 8000);
  setTimeout(function(){ bod.style.backgroundImage = "url('index.jpg')" }, 7000);
  setTimeout(function(){ bod.style.fontSize = "5em" }, 7000);
  setTimeout(function(){ bod.style.backgroundImage = "url('index1.jpg')" }, 7300);
  setTimeout(function(){ bod.style.fontSize = "1em" }, 7400);
  setTimeout(function(){ stand.style.display = "block" }, 7600);
  setTimeout(function(){ bod.style.backgroundImage = "url('No_signal.gif')" }, 7600);
  setTimeout(function(){ stand.style.display = "none" }, 8500);
  setTimeout(function(){ bod.style.backgroundImage = "none" }, 8500);

</script>


And also i know that i can write it using jQuery like in this way:
JavaScript
$(".a").fadeIn(3000,function(){
    $(".b").fadeIn(4000, function(){
        $(".c").fadeIn(5000);
    });
});


But are there any better ways to doing these actions, cleaner?
Posted
Comments
Sergey Alexandrovich Kryukov 5-Apr-15 14:17pm    
In addition to my answer. Your other problem is having few different time constants. First of all, define the separately (see my "settings" object for an example). Now, my way of counting time is that the variable "duration" comes back to zero when the frame is rendered. You can break one single frame into phases. It could look like
if (duration < settings.timeFadeA)
fadeA(/* ... */);
else if (duration < settings.timeFadeB)
fadeA(/* ... */);
// and so one from earlier phases to later

—SA

1 solution

JavaScript already has a device more suitable for animation and really used for animation. Before I start to explain it, look at my code sample with a pretty simple example of animation, the one which comes with my recent April 1st article Some Programming Approaches to "Neuro-Linguistic Programming".

In the code, you will see the fallback to analogous functions of particular browsers to the last resort of window.setTimeout, in cases when this function is not included in particular JavaScript implementation (not very likely, only for obsolete browsers).

Here is the idea
JavaScript
function showException(exception) { // mostly for debugging purposes
    alert(  exception.name + ":\n" + exception.message +
        "\n" + "\nLine: " + exception.lineNumber +
        "; column: " + (exception.columnNumber + 1) +
        "\n\n" + exception.stack);
} //showException

// ...

try { (function() {
    if (!window.requestAnimationFrame)
        // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
        window.requestAnimationFrame =
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function(callback, element) { window.setTimeout(callback, 1000 / 60); }
    doSomeInitialization(/* ... */);
    var after, before = now();
    function frame() {
        after = now();
        RenderFrame(Math.min(1, (after - before) / 1000.0));
        before = after;
        requestAnimationFrame(frame);
    } //frame
    frame();
})(); } catch(e) { showException(e); }

// ...

var duration = 0;

var renderFrame(timeStamp) {
   duration += dTime;
   if (duration <= settings.delay) return;
   duration -= settings.delay; // suppose you have some constant
                               // settings.delay, inverse frame rate
   // and now do the rendering
   // ...
}


Please see: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame.

Main function is anonymous, using the IIFE JavaScript design pattern. Please see: http://en.wikipedia.org/wiki/Immediately-invoked_function_expression.

My demo works with HTML5 <canvas> element, but I believe you can use any other kind of animation, based on any properties of any HTML elements.

You can combine animated behavior with interactive, based on user input events (keyboard, mouse). One my example is more complicated animated application: Tetris on Canvas. Sorry if it's a bit too complex for understanding (I just don't know any simpler example), but perhaps you will be able to catch and idea from my explanations above and the article.

—SA
 
Share this answer
 
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900