Home > Developer > JavaScript
Use the animation function animate of jQuery to implement the pea emission effect.
Let's take a look
Peas, lawns, and bullets are all ready-made images,
1. Is jQuery a library or framework?
JQuery is now the most popular js class library, rather than the framework.
Previously, I saw someone say this in zhihu:
You call library. Framework callyou.
I think that, literally, you can use a class library without constraints, but you need to use a framework under various constraints.
I personally think that the js library refers to an API that interacts directly with document elements. You can directly reference the library to serve you. The framework is biased towards the architecture level. If you want to use the framework, you must follow its rules. For example, angular. js provides methods and limits the dom document structure.
This is also true for the three major Java frameworks.Spring, You have to follow the steps, just like a house, reinforced concrete has been completed, you just need to go in the decoration is OK. The library is a bit similarStringUtilsIn addition to the interface exposed by it, you don't need to worry about it. Just call it directly.
2. the animate function of jQuery
animate()Function is used to execute a Custom Animation Based on css attributes.
Basic usage:
$('#id').animate(css,time,callback);
Css:List of final styles you need to implement
Time:Time of transition
Callback:Callback Function
animateThe function is mainly used to achieve the transition effect of some css styles.
3. Introduce jQuery
For example, I have a div box.
<!DOCTYPE html>In the above Code, we introduced the jQuery file provided by Baidu.
So how can we quickly determine whether the import is successful? The following methods are provided:
1. console. log ($ );
Effect:
This indicates that the import is successful.
2. Verify with a browser directly
Open your page and press F12 to display the console. This is the built-in browser (I use Google Chrome here ).
Enter $
Enter!
Ah, is that okay?
4. onmouseover event
Let's give
divAdd a mouse stroke event to the box.$('#box').on('mouseover',function(){ alert();});Stroke:
Well, at the very least, this shows that all of our code so far is correct. I like this when I was a beginner in js, So that I feel that every line of code is well written.
5. Use the animate function to change the width and height of the box.
We set
alertRemove and add the following code:$('#box').on('mouseover',function(){ $('#box').animate({width:600},500);});This indicates that when I draw the mouse, the width is changed to 500 PX and the transition time is milliseconds.
What should we do if we want to double the width and the height?
By the way, use the callback function. When the first animation is executed, continue to execute the next Animation:
$('#box').on('mouseover',function(){ $('#box').animate({width:600},500,function(){ $('#box').animate({height:600},500); });});
In this way, there is a sequence.
This article briefly introduces the use of the jQuery animate function.
6. Appendix
Finally, the Code for the first case is attached,
animateThe js timer is also used.setIntervalMethod:<!DOCTYPE html>Summary
The above is all the content of this article, hoping to help you in your study and work. If you have any questions, please leave a message. Thank you for your support.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
