Using jquery's animation function animate to realize the effect of pea launch _jquery

Let's take a look at the effect chart.

The pea shooter, the lawn and the bullets are all ready-made pictures,

1. is jquery a library or a framework?

jquery can be said to be the most popular JS class library, not the framework.

Before I saw someone say something like this:

Call Library. Framework calls you.

I think, literally, is that you can use the class library without constraint, but you need to use a framework under various restrictions.

I think the JS library refers to an API that interacts directly with document elements, and you can refer directly to the library for your service. And the framework is biased towards the architecture level, and if you want to use the framework, you have to follow its rules. Like Angular.js, it provides you with a way to constrain the DOM document structure.

Take the three major Java framework, is also true, you want to use Spring , you have to follow its steps, like a house, reinforced concrete has been set up, you just need to go into the decoration on the OK. And the library, a bit similar to StringUtils the lingering charm, in addition to its exposed interface, other you do not need to care, direct call on the line.

2. jquery's animate function

animate()function to perform a custom animation based on CSS properties

Basic usage:

$ (' #id '). Animate (Css,time,callback);

CSS: The list of styles you need to implement finally

Time : Timing of transition

callback: callback function

animateThe function is mainly to achieve the transition effect of some CSS styles.

3. Introducing JQuery

For example, now I have a div box.

<! DOCTYPE html>
 
 

In the above code, we introduced the jquery file provided by Baidu.

So how quickly can you tell if you've introduced success? The following methods are available:

1.console.log ($);

Effect:

This demonstrates the success of the introduction.

2. Validate directly with browser

Open your page, click F12, the console appears, this is the browser itself (I use Google browser here).

Enter $

Enter!

Eh, is this possible?

4. The onmouseover Incident

Let div 's add a mouse to the box to the event.

$ (' #box '). On (' MouseOver ', function () {
 alert ();
});

Row up:

Well, at least, this means that we have so far the code is correct, I am learning js when I like this, let me feel that every line of code are written very reassuring.

5. Change the width and height of the box with the animate function

Let alert 's take it off and add the following code:

$ (' #box '). On (' MouseOver ', function () {
 $ (' #box '). Animate ({width:600},500);
});

This means that when I draw the mouse up, I change the width to 600px and the transition time is 500 milliseconds.

What if we want to double the height after doubling the width?

Yes, with the callback function, when the first animation finishes, the next animation continues:

$ (' #box '). On (' MouseOver ', function () {
 $ (' #box '). Animate ({width:600},500,function () {
  $ (' #box '). Animate ({ height:600},500);
 });

So there is a sequence of priorities.

This article briefly introduces the use of the jquery animate function.

6. Appendix

Finally, attach a start case code, in addition animate to the function, but also use the JS timer setInterval method:

<! DOCTYPE html>  

Summarize

The above is the entire content of this article, I hope for everyone's study and work can help. If you have any questions, please leave a message, thank you for your support to the cloud-dwelling community.