JavaScript animation effect (4) _javascript tips

We wrote a little bit about JS animation in front of the plugin, we use the previous framework to complete the animation we want to effect. We often see in Taobao, the mouse passed a picture, the picture has from the roll out and from the bottom roll into effect, then that effect is how to achieve it?

First we complete the HTML and CSS code for the effect, the code is as follows:
HTML Section Code:

<div id= "Move" >
 <a href= "#" ><i></i><p> lottery </p ></a>
 <a href= "#" ><i></i><p> movie </p>< /a>
 <a href= "#" ><i></i><p> Point takeaway </p></a>
 <a href= "#" ><i></i><p> finance </p></a>
 <a href= "#" ><i></i><p> Find services </p></a>
 <a href= "#" ><i></i><p> music </p></a>
 <a href= "#" ><i></i><p> coal power </p></a>
 <a href= "#" > <i></i><p> train tickets </p></a>
</div> 

CSS Part code:

*{margin:0; padding:0;}
#move {padding:10px width:400px; Background-color: #f4f4f4; margin:10px auto; border:1px solid #ccc; border-radius:1 0px;
#move a{color: #3c3c3c; display:inline-block; width:58px; height:25px; border:1px solid #ddd; border-radius:3p X Background-color: #fff; margin:10px 17px; position:relative; padding-top:40px; font-size:12px; Text-decoration:none; line-height:25px; Overflow:hidden;
#move a i{position:absolute; top:10px; left:0; display:inline-block; width:100%; text-align:center; fliter:al PHA (OPACITY=100); Opacity:1;
#move a p{text-align:center;} #move a:hover{color: #F40;}
#move img{Border:none;}

"With homemade animation JS plugin to achieve"

First we should introduce our Plug-ins: Foodoir.animate.js, and then we can write the animation we want, the code is as follows:

Window.onload = function () {
 var omove = document.getElementById (' move ');
 var OA = omove.getelementsbytagname (' a ');
 for (var i = 0; i < oa.length i++) {
  oa[i].onmouseenter = function () {
   var _this = this.getelementsbytagname (' I ') [0];
   Startmove (_this, {top
    : -15,
    opacity:0
   }, function () {
    _this.style.top = + ' px ';
    Startmove (_this, {
     top:10,
     opacity:100
    });
   });
}};

Note: Here we are using onmouseenter instead of onmouseout to prevent multiple triggers of mouse events. In addition, before performing a function, we first let the position of I to top:20px position, so that we will see the scrolling effect, code: _this.style.top = + ' px ';

"Use the jquery framework to implement"

After we introduce the official jquery framework, we write the following code:

$ (document). Ready (function () {
 $ (' #move a '). MouseEnter (function () {
  $ (this). Find (' I '). Animate ({Top
   : " -15px ",
   opacity:" 0 "
  }, the function () {
   $ (this). css ({top
    :" 20px "
   })
   $ (this). Animate ({ Top
    : "10px",
    opacity: "1"
   }
)})

Below we use a picture to compare jquery and native JS similarities and differences, such as figure:

Different points:

1, the two methods of loading method is different, in jquery is $ (document). Ready (), whereas in native JS is window.onload = function () {};

2. Since jquery encapsulates many methods, the method of acquiring elements is also different, in jquery it is $ (...), while in native JS it is DOM operator to obtain;

3, followed by jquery through $ (this). Find (' I ') function will all need to change I get, in the native JS, we also need to pass the for method to traverse the required I;

4, in jquery is the MouseEnter function, and then the user in the function to get I and then do the corresponding operation (we see the code does not seem to involve whether the operation corresponds to the specific i), and in the native JS is first to get the ' I ', then carries on the Onmouseenter event, its corresponding is a function, and in the current function must obtain further to the concrete I;

5, in jquery is through the Animate function to control animation, this is jquery encapsulation good, and in the native JS is through the Startmove function to control animation, And Startmove allows us to encapsulate a function in foodoir.animate.js;

6, although the value is passed in JSON, but the value is not the same (for example, with units and no units), this is related to our own encapsulated plug-ins;

7, in jquery, there is also a number of 300 (200), which in the jquery Express speed, and our plug-ins, the direct speed is also encapsulated, if we want to change the speed of movement, we need to modify the foodoir.animate.js;

Same point:

1, are in the page after the load is done

2, for simultaneous motion, is the use of JSON transfer value

Summary: in this, we can obviously see, write jquery code than native JS code less, and much more convenient. You can first study the original JS implementation methods, and then to think about why jquery to achieve this, so learn faster, know more things, the probability of error will be reduced. The second is that for our previous plug-ins, compared to jquery, there are many areas that need improvement.

Here we come to the end of the JavaScript animation, there are new requirements will continue to update ~

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.