首頁  >  文章  >  web前端  >  jQuery實作的文字hover顏色漸變效果實例_jquery

jQuery實作的文字hover顏色漸變效果實例_jquery

WBOY
WBOY原創
2016-05-16 15:14:471779瀏覽

本文實例講述了jQuery實現的文字hover顏色漸變效果。分享給大家參考,具體如下:

<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>

更多關於jQuery相關內容有興趣的讀者可查看本站專題:《jQuery拖曳特效與技巧總結》、《jQuery常見經典特效匯總》、《 jQuery擴充技巧摘要》、《jquery選擇器用法摘要》及《jquery常用操作技巧總結

希望本文所述對大家jQuery程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn