Home > Article > Web Front-end > Implementation of mouse-responsive Taobao animation effects
This time I will bring you the implementation of the mouse-responsive Taobao animation effect. What are the precautions for making the mouse-responsive Taobao animation effect? The following is a practical case, let’s take a look.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <style> * { margin: 0; padding: 0; font-family:"微软雅黑" } #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; } </style> </head> <body> <p id="box"> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> </p> <script> $(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) }) }) }); </script> </body> </html>
This animation can achieve the visual effect of the gradient flying upward when the mouse slides over.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to add li tags and attributes with jQuery
How jQuery gets the value of the tag sub-element
The above is the detailed content of Implementation of mouse-responsive Taobao animation effects. For more information, please follow other related articles on the PHP Chinese website!