fade / css class transition happening out of order

Question

I have several page elements I want to fade out. I then change the css class of them (while they are not visible) then fade them back in.

I thought I had ordered the execution flow properly but sure enough the css class transition is occurring before the fadeOut is complete. Visually what happens is that a person sees the css change and then fadeout occurs.

You can see it at the link below. Between slide 1 & 2 it happens but is not as noticeable as the css change is from class a to class a. Between slide 2 & 3 you can see it as that is from class a to class b.

http://staging.alexandredairy.com

jquery transition code onReady kicks it off:

var txtread = 
{
    onReady: function(_imgname)
    {
        txtread.fadeoutText(_imgname);

        txtread.fadeinText();
    },

    fadeoutText: function(_imgname)
    {
        $("#pagetitle").fadeOut(1250);
        $("#pagemenu").fadeOut(1250);
        $("#pageslogan").fadeOut(1250);
        $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
    },

    fadeinText: function()
    {
        $("#pagetitle").fadeIn(1250);
        $("#pagemenu").fadeIn(1250);
        $("#pageslogan").fadeIn(1250);
        $("#sitecopy").fadeIn(1250);
    },

    TextReadabilityHandler: function(_imgNameSwitch)
    {
        if(_imgNameSwitch == 'Light')
        {
            $("#pagetitle").attr('class', 'sitetitle lighttextbackground');
            $("#pagemenu").attr('class', 'sf-menu lighttextbackground');
            $("#pageslogan").attr('class', 'slogan lighttextbackground');
        }
        else if (_imgNameSwitch == 'Dark_')
        {
            $("#pagetitle").attr('class', 'sitetitle darktextbackground');
            $("#pagemenu").attr('class', 'sf-menu darktextbackground');
            $("#pageslogan").attr('class', 'slogan darktextbackground');
        }
        else
        { alert(_imgNameSwitch); }
    }
}

so I thought order of execution, longer fadeOut, and setting the fadeOut completed function last would keep things in order but alas. I was wrong.

Thank You

Edit

So now I have tried window.setTimeout and it behaves exactly the same as if the timeout doesn't even run???

OK my bad. I originally tried:

window.setTimeout(txtread.TextReadabilityHandler(_imgname), 3000);

and that didn't error or work. I then went back and reread a bit better and saw to use a callback so I rewrote this way:

window.setTimeout(function(){ txtread.TextReadabilityHandler(_imgname); }, 3000);

and now it is working.

My original question still applies though. I understand javascript is an asynchronous programming language but it is imperative no?? Perhaps I am getting terms jumbled in my head.

Does the following execute one after the other:

alert('1');
alert('2');
alert('3');

or do they all execute at once?

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

The alerts would execute in order. Javascript is single threaded.

Edit: Er, I guess that is true for the most part

Check out this link for a good explination, especially regarding fades, etc. Is JavaScript guaranteed to be single-threaded?

edited May 23 '17 at 11:56

Community

1
1

answered Dec 03 '13 at 12:43

Michael Ford

851
6
9

score 2 · Accepted Answer · answered Dec 03 '13 at 12:49

Your code includes the following.

onReady: function(_imgname)
{
    txtread.fadeoutText(_imgname);
    txtread.fadeinText();
}

You are correct in thinking that txtread.fadeinText() will not run until txtread.fadeoutText(_imgname) is complete. However, fadetextOut is completing before you are expecting it to.

fadeoutText: function(_imgname)
{
    $("#pagetitle").fadeOut(1250);
    $("#pagemenu").fadeOut(1250);
    $("#pageslogan").fadeOut(1250);
    $("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
}

will return almost immediately, having told the various elements to fade out over a period of time. So calling txtread.fadeinText() will not wait for those elements to fade out.

You will need to add some form of callback to fadeinText and fadeoutText, which you can use to let other code know they have finished, like so.

onReady: function(_imgname)
{
    txtread.fadeoutText(_imgname, function () {
        txtread.fadeinText();
    });
}

fadeoutText: function(_imgname, cb)
{
    $("#pagetitle").fadeOut(1250);
    $("#pagemenu").fadeOut(1250);
    $("#pageslogan").fadeOut(1250);
    $("#sitecopy").fadeOut(1550, function() {
        txtread.TextReadabilityHandler(_imgname);
        cb();
    });
}

fadeinText: function(cb)
{
    $("#pagetitle").fadeIn(1250);
    $("#pagemenu").fadeIn(1250);
    $("#pageslogan").fadeIn(1250);
    $("#sitecopy").fadeIn(1250, cb);
}

which is why in my edit the setTimeout callback is working. Thank you very much for the explanation! — GPGVM, Dec 03 '13 at 13:00

score 1 · Answer 3 · answered Dec 03 '13 at 12:48

As Michael said, the javascript will all run at the same time. So, run your fadeout functions, then, once they're finished, call the csschange functions and, once that's complete, run the fade in functions.

I'd be able to write this in jQuery (as it's easy to add a function to run after another is complete). It should be straighforward in plain js, I just don't know the syntax so well . . .

score 1 · Answer 4 · answered Dec 03 '13 at 12:49

in javascript commands are excuted in order , the thing is if you have error within just one command , it could stop the whole script from excution .

http://www.w3schools.com/js/js_statements.asp

Each statement is executed by the browser in the sequence they are written.

fade / css class transition happening out of order

Edit

4 Answers4