search

Home  >  Article  >  Web Front-end  >  Use jQuery's animation function animate to achieve the pea launching effect

Use jQuery's animation function animate to achieve the pea launching effect

高洛峰
高洛峰Original
2016-12-28 10:45:531147browse

Peashooter, lawn and bullets are all ready-made images.

1. Is jQuery a library or a framework?

jQuery can be said to be the most popular js library now, rather than a framework.

I saw someone say something like this on Zhihu before:

You call library. Framework calls you.

I think so, the literal meaning is probably you Class libraries can be used without restrictions, but a framework needs to be used under various restrictions.

I personally think that the js library refers to an API that directly interacts with document document elements. You can directly reference the library and let it serve you. The framework is biased towards the architectural level. If you want to use the framework, you must follow its rules. For example, angular.js provides you with methods while also constraining the DOM document structure.

Take the three major frameworks of Java as an example. The same is true. If you want to use Spring, you have to follow its steps. It is like a house. The reinforced concrete has been completed. You only need to go in and decorate it. . The library is somewhat similar to StringUtils. Except for the interface it exposes, you don't need to care about anything else, just call it directly.

2. jQuery’s animate function

The animate() function is used to execute a custom animation based on css attributes

Basic usage: 

$('#id').animate(css,time,callback);

css: List of styles you need to finally implement

time: Transition time

callback: callback function

The main function of the animate function is to achieve some CSS style transition effects.

3. Introduce jQuery

For example, now I have a div box. 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id=&#39;box&#39;></div>
 </body>
 
 <script>
 
 </script>
 
</html>


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

So how to quickly determine whether the introduction is successful? The following methods are provided:

1.console.log($);

Effect:

Use jQuerys animation function animate to achieve the pea launching effect

This shows that the introduction was successful.

2. Directly use the browser to verify

Open your page, press F12, and a console like this will appear. This is what the browser comes with (I am using Google Chrome).

Use jQuerys animation function animate to achieve the pea launching effect

Enter $

Use jQuerys animation function animate to achieve the pea launching effect

and press Enter!

Use jQuerys animation function animate to achieve the pea launching effect

Hey, is this okay?

4. onmouseover event

Let’s add a mouse over event to the div box. 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

Cross it:

Use jQuerys animation function animate to achieve the pea launching effect

Well, at least, this shows that our code so far is correct, I I liked this when I first learned JS. It made me feel confident that every line of code was written.

5. Use the animate function to change the width and height of the box

We remove the alert and add the following code: 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

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

Use jQuerys animation function animate to achieve the pea launching effect

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

By the way, use the callback function. When the first animation is completed, continue to execute the next animation: 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

Use jQuerys animation function animate to achieve the pea launching effect

This way there is a sequence order.

This article briefly introduces the use of jQuery animate function.

6. Appendix

Finally, the code of the initial case is attached. In addition to the animate function, the js timer setInterval method is also used: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class=&#39;wrap&#39;>
   <ul class=&#39;plants1&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants2&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants3&#39;>
 
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="Use jQuery's animation function animate to achieve the pea launching effect" >
    </li>
   </ul>
  </div>
 </body>
 
 <script type="text/javascript">
 
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };
 
  setInterval(function(){
   var $this = $(&#39;.PB00&#39;).eq(randomNum(17));
   $this.animate({&#39;margin-left&#39; : 1000},2000,function(){
    $this.css({&#39;margin-left&#39; : 0});
   });
  },10);
 
 </script> 
 
</html>

Summary

The above is the entire content of this article. I hope it can be helpful to everyone’s study and work. If you have any questions, you can leave a message to communicate. Thank you for your support of the PHP Chinese website.

For more related articles using jQuery’s animation function animate to achieve the pea launching effect, please pay attention to the PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A simple example of JQuery implementing other animation effects of DIVNext article：A simple example of JQuery implementing other animation effects of DIV

Related articles

See more