本文实例讲述了jQuery实现动画效果circle的方法。分享给大家供大家参考。具体如下：
这款jQuery实现动画效果circle，Google+的圈子特效做的很不错，这里模仿下，时间有限，还有一个动画累积的问题没有解决。当然，是基于 jQuery的，纯JS 还没有这个能力呢。感兴趣的朋友可以加以完善试试。
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery 动画效果 circle</title> <style> body { width:200px; margin:0 auto; margin-top:100px; background:#CCC; } #login{ position:relative; } .circle_l, .circle_b { width:148px; height:148px; border-radius:80px; background:blue; border:1px solid #FFF; } .circle_l { width:138px; height:138px; position:absolute; top:5px; left:5px; } .circle_b { background:lightblue; } </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> </head> <body> <div id="login"> <div> <div></div> </div> </div> <script type="text/javascript"> $(".circle_b").hover(function(){ $(this).stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500) .css({"border-radius":"150px"}); $(".circle_l").stop().animate({marginTop:"20"},500) },function(){ $(this).stop().animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500) .css({"border-radius":"100px"}); $(".circle_l").stop().animate({marginTop:"0"},500) }) </script> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。