Home > Article > Web Front-end > Example of text hover color gradient effect implemented by jQuery_jquery
The example in this article describes the text hover color gradient effect implemented by jQuery. Share it with everyone for your reference, the details are as follows:
<html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").hover(function(){ $("a").animate({width:"80%",height:"40%",fontSize:"100px"},1600,function(){ $("a").animate({color:"#FFFFFF"},1600); }); },function(){ $("a").animate({color:"blue"},1600,function(){ $("a").animate({width:"100px",height:"20px",fontSize:"14px"},1600); }); }); }); </script> </head> <body> <a href="#" style="width:100px;height:20px;font-size:14px;border:red 1px solid;">我不是淡入淡出</a> </body> </html>
Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and techniques summary", "jQuery common classic special effects summary", " jQuery extension skills summary", "jquery selector usage summary" and "jquery common operation skills summary"
I hope this article will be helpful to everyone in jQuery programming.