Javascript Animation Level: Beginner

Question

I'm trying to learn Javascript animations but, as I thinked, it doesn't work xD.

UPDATED DELETING PASTING MISTAKES

I tried

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(setOpacity("div_home",i),200);
    }
};

function setOpacity(id,value) {
    document.getElementById(id).style.opacity = value/10;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')';
};

And HTML:

<td id="button_home" onclick="click_home();"> Home </td>

But obviously is wrong. What can I do to do this?:) Thanks to all replies :)

You need to tell us _why_ it's wrong; what is is not doing that you want it to do, what behaviour does it currently exhibit? — Bojangles, Feb 14 '12 at 14:04
@JamWaffles This is the problem: nothing happens. And I edited what's wrong and what isn't in the code. — Bonny1992, Feb 14 '12 at 14:20

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

Firstly, you've got a syntax error in the for loop (change the , to a ;).

You need to pass a function to setTimeout, so it can execute it periodically. What you're currently passing setTimeout is the result of executing setOpacity("div_home",i) (i.e. undefined).

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(function () {
           setOpacity("div_home",i)
       }, 200);
    }
};

What you'll also find is you value of i will always end up being the last value, because of the scope of i, to fix this you need to add a new scope level. For a more detailed description on this problem, see How to reference right value of `i` in a callback in a loop?

function click_home()
{
    function delay(i) {
        setTimeout(function () {
           setOpacity("div_home",i)
        }, 200);
    }

    for(i=0;i<=10;i++)
    {
       delay(i);
    }
};

As noted in the comments, you will find all of your timeouts will execute after 200ms.. to get the animation you'll need to stagger the execution. The simplest way would be to add i to the delay calculation; i.e. 25 * i.

I'm not sure why you're setting the opacity and filter to 0 first in your setOpacity function; these resets will immediately be set to the values that follow.

You should also look at caching the result of document.getElementById(id).style, as you're looking it up 4 times (and will be 2 if you remove the unneeded resets described above).

function setOpacity(id,value) {
    var style = document.getElementById(id).style;

    style.opacity = value/10;
    style.filter = 'alpha(opacity=' + value*10 + ')';
};

edited May 23 '17 at 10:34

Community

1
1

answered Feb 14 '12 at 14:04

Matt

74,352
26
153
180

Since all the changes will happen after 200 ms, nothing will appear to happen but an immediate opacity jump. Change 200 to i*20 – Dave Feb 14 '12 at 14:12
Nope, this one doesn't work for me... I thought that was for the ';' forgotten in 'setOpacity("div_home",i)' but nope. Thanks a lot, anyway :) – Bonny1992 Feb 14 '12 at 14:14
@Dave: Well noticed. Updated. – Matt Feb 14 '12 at 14:14
@Bonny1992: This answer will get you a long way to getting it working. Putting a comment at the bottom saying "this doesn't work" doesn't help me, *or anyone else* getting you the remainder of the way (whatever the remaining problems are). *Be more specific*. – Matt Feb 14 '12 at 14:15
And changed 200 to i*20 but no thing appeared. – Bonny1992 Feb 14 '12 at 14:15
... Sorry for my bad specification :). The resets was a try and I forgot to delete before paste here. I tried put your code, but my 'div_home' had no animation or opacity... Do you need something else? :) Sorry again :) – Bonny1992 Feb 14 '12 at 14:18
@Bonny1992: My code works in the test I tried; http://jsfiddle.net/2zA4K/1. Perhaps you can compare my example to the code you're using and work out where the differences lie. – Matt Feb 14 '12 at 14:22
@Matt: Your code on jsfiddle.net works, in fact applied to my html works [jsfiddle link updated](http://jsfiddle.net/2zA4K/2/), but on Chrome or Firefox don't... – Bonny1992 Feb 14 '12 at 14:25
@Bonny1992: What do you want the code to do? When I click "Home" on your example (in Chrome) the text `asndaklsndamndklmcadcmk` fades in? – Matt Feb 14 '12 at 14:27
@Matt: Yes, i wanted to make a div fade in and even fade out... and i wrote something inside it xD And your code is perfect, but on Chrome or Firefox don't works and I don't know why... – Bonny1992 Feb 14 '12 at 14:30
@Matt: Here, neither Chrome or Firefox do a fade. And I don't know why... Do you wanna try passing an archive containing all the files? If you want [Download Link](http://www.mediafire.com/?t39ydvopv5c8aab) – Bonny1992 Feb 14 '12 at 14:38
@Matt: Even with [script.aculo.us](http://www.tutorialspoint.com/script.aculo.us/scriptaculous_opacity_effect.htm) fade script works... :( – Bonny1992 Feb 14 '12 at 16:16
I tried with [Bernie Sumpton's Animator](http://berniesumption.com/software/animator/) and it works!!! :) – Bonny1992 Feb 14 '12 at 18:16

Javascript Animation Level: Beginner

1 Answers1