连续动画效果jQuery实现

来源：互联网 2023-03-17 00:52:17 185

还在为jquery学习而发愁么……快来一起学习吧，每天进步一点点哦*_*现在动画效果越来越多的应用到网站中，js类库之一jQuery也是实现动态效果的方法，在这里学习学习jQuery的连续动画效果。只需用几行代码，我就可以让方框到处乱飞，而且带有缩放和淡出的效果。

连续动画效果jQuery实现

工具/原料

P>相关软件/P>
P> 一杯水（写累了歇会儿，慢慢做嘻嘻）/P>

方法/步骤

htm:a href="#" >Run/a>/div style="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;" id="box"> /div>

css:style type="text/css">body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }a { font-weight: bold; color: #000000; }#box { background: #6699FF; height: 100px; width: 100px; position: relative; }/style>

js:script type="text/javascript">$(document).ready(function(){$(".run").click(function(){$("#box").animate({opacity: "0.1", left: " =400"}, 1200).animate({opacity: "0.4", top: " =160", height: "20", width: "20"}, "slow").animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow").animate({top: "0"}, "fast").slideUp().slideDown("slow")return false;});});/script>

未点击运行的显示效果

点击逐渐变化

大小发生变化，位置也相应变化运行太快很难捕捉

快要回到原位时的效果

连续动画效果jQuery实现