WEB programming frontend 6: How to Make jquery animation effect and program execution in sequence

Some minor problems may occur when using the jquery framework to process some simple animations.

For example:

$ ("# Pic"). ATTR ("src", "0.jpg ");

$ ("# Pic"). fadeout ("slow ");

$ ("# Pic"). ATTR ("src", "1.jpg ");

$ ("# Pic"). fadein ("slow ");

The expected result is:

1 # PIC load 0.jpg;

2 # fade out of PIC;

3 # PIC loading 1.jpg;

4 # fade in PIC;

Implements a simple image switching, but the actual running result is

1. The JPG file is fadeout and fadein.

The reason is that $ ("# pic"). ATTR ("src", "1.jpg"); is an instant action.

Fadeout and fadein are continuous actions. When we see the fadeout action

ProgramThe execution is complete. # The PIC has been replaced with 1.jpg, so 1.jpg is executed continuously.

Fadeout, fadein.

 

How can this problem be solved? In fact, the method is also very simple, just change the above program:

$ ("# Pic"). ATTR ("src", "0.jpg ");

$ ("# Pic"). fadeout ("slow", function (){

$ ("# Pic"). ATTR ("src", "1.jpg ");

}). Fadein ("slow ");

Use the callback function of fadeout.

Replace 1.jpg and then execute fadein.

 

Through this method, we can solve the issue of program sequence execution between similar animations.