JQuery execute functions sequentially

Question

I've got a problem executing functions sequentially. On my html file I've got this:

<body onload="start();">

    <div id="title"><div id="welcome">WELCOME</div></div>

Inside my JS I've got this, which should execute the background change to black, and when that ended it would make the "welcome" div appear.

function start(){

    $('body').css('background', 'black', function() {
        $('#welcome').fadeIn("slow");
    });

}

Problem is: Only the background change is being executed. I get no errors on the browser console.

Any ideas on where I might have gone wrong?

EDIT: I've got this on the body css so that it slowly changes from white to black

-webkit-transition:all 1.0s ease;
    -moz-transition:all 1.0s ease;
    transition:all 1.0s ease;

Why is there a function inside .css? I don't see it anywhere in the documentation. — Derek 朕會功夫
– Derek 朕會功夫, Commented Dec 13, 2013 at 16:56

epascarello · Accepted Answer · 2013-12-13 16:55:00Z

2

Where in the documentation do you see that function signature? That does not exist.

.css( propertyName )
.css( propertyNames )
.css( propertyName, value)
.css( propertyName, function(index, value) )
.css( properties )

Break it up, there is no callback that executes. It is not an asynchronous step.

$('body').css('background', 'black');
$('#welcome').fadeIn("slow");

answered Dec 13, 2013 at 16:55

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1994997 Over a year ago

Thing is: how can I change the duration of the background change?

epascarello Over a year ago

css() is not animate()

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-12-13 16:56:00Z

0

Why not update each function in one line?

function start() { // rename this..
  $('body').css('background', 'black');
  $('#welcome').fadeIn();
}

answered Dec 13, 2013 at 16:56

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

Comments

Illaya · Accepted Answer · 2013-12-13 16:57:27Z

0

Try this.. may be helpful to you.

$('body').css('background', 'black');
$('#welcome').fadeIn("slow");

answered Dec 13, 2013 at 16:57

Illaya

6666 silver badges14 bronze badges

Comments

dkellner · Accepted Answer · 2013-12-13 16:57:39Z

0

jQuery css() doesn't have a callback - I think you confuse it with "animate" which is a slow (therefore a delayed) thing to do while "css" happens immediately.

You can chain jQuery commands like this:

$(".stuff").css("background","black").css("color","red")

This can be done with anything that happens immediately. Callbacks are for proper timing when something takes time.

Also, for css, there is another way:

$(".stuff").css({
    "background":"black",
    "color":"red",
});

But that's not very general in jQuery. Chaining (like above) will work almost everywhere.

answered Dec 13, 2013 at 16:57

dkellner

10.2k3 gold badges54 silver badges53 bronze badges

Collectives™ on Stack Overflow

JQuery execute functions sequentially

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related