How do I get some JavaScript/jQuery to run in sequence

Question

I have an HTML file which contains two divisions. One has id 'welcome' and the other is named 'welcome_distort'.

With jQuery imported, I have a seperate js file which contains some code that operates on these divs.

$("#welcome").fadeTo(50,0.1);
$("#welcome").fadeTo(10,1.0);
$("#welcome").fadeTo(10,0.1);
$("#welcome").fadeTo(10,1.0);
$("#welcome").fadeTo(1000,0.0);

$("#welcome_distort").css({opacity:"1.0"});

All the fadeTo() commands work in sequence. What I then want to happen is the css() command to come after these fadeTo()s. In reality, the operation on welcome_distort takes place at the same time as the first operation on welcome. My question is: how do I get the .css() operation to run after the last .fadeTo().

Many Thanks, John

drrobotnik · Accepted Answer · 2011-07-09 19:47:18Z

2

fadeto has a callback option, that runs after the animation is complete. My code is grabbed from: http://api.jquery.com/fadeTo

$('#welcome').fadeTo(1000,0.0, function() {
      $("#welcome_distort").css({opacity:"1.0"});
    });

answered Jul 9, 2011 at 19:47

drrobotnik

7592 gold badges11 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How do I get some JavaScript/jQuery to run in sequence

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related