Example of jQuery implementing mouse responsive Taobao animation effect

This article describes the implementation of mouse responsive Taobao animation effects by jQuery. Share it for your reference, as follows:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;JqueryTaobao animation&lt;/title&gt;
&lt;script src="/jquery/1.10.2/"&gt;&lt;/script&gt;
&lt;style&gt;
* {
 margin: 0;
 padding: 0;
 font-family:"Microsoft Yahei"
}
#box{
 padding-left:20px;
 background-color:#f9f9f9;
 border:1px solid #ccc;
 width:236px;
 height:250px;
 margin:0 auto;
}
#box a{
 width:50px;
 height:60px;
 border:1px solid #ccc;
 float:left;
 margin:10px 10px;
 background-color:#FFFFFF;
 text-align:center;
 font-size:14px;
 position:relative;
}
#box a i{
 position:absolute;
 top:15px;
 left:18px;
}
#box a p{
 position:absolute;
 top:36px;
 left:5px;
}
#box a{
 cursor:pointer;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div &gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;a&gt;&lt;i&gt;&lt;img src="rec_view(1).png"/&gt;&lt;/i&gt;&lt;p&gt;Text play&lt;/p&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;script&gt;
$(function(){
  $("#box a").mouseenter(function(){
    $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){
      $(this).css({top:"25px"});
      $(this).animate({top:"15px",opacity:"1"},200)
    })
  })
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

This animation can realize the visual effect of the mouse gradually flying upward when it slides past.

For more information about jQuery, please visit the special topic of this site:Summary of commonly used plug-ins and usages of jQuery》、《Summary of jQuery extension skills》、《Summary of jQuery drag and drop special effects and skills》、《Summary of common classic effects of jQuery》、《Summary of jQuery animation and special effects usage"and"Summary of jquery selector usage》

I hope this article will be helpful to everyone's jQuery programming.