动画插件smooth.js

smooth.js用于平滑运行一个CSS动画并根据需要执行一个回调函数 smooth.jsjquery插件
试一试
#testArea为尺寸为500*150像素
宽度动画成为800宽度动画成为500
 $("#testArea").smooth({"width":800},function(){$("#testArea").html('#testArea为尺寸为<span class="striking font24">800</span>*150像素')});
      $("#testArea").smooth({"width":500},function(){$("#testArea").html('#testArea为尺寸为500*150像素')});
如何使用

引入插件

<script type="text/javascript" src="/media/js/libs/jquery.min.js"></script><!--jquery库-->
       <script type="text/javascript" src="/media/js/libs/jquery.smooth.js"></script><!--动画插件-->

-语法及参数

$(element).smooth(_css,_ms,_callback,_thisTween);
      $(element).smooth(_css,_callback);//注意! 当只有两个参数时,第一个为CSS,第二个为回调函数,动画运行时长为300ms
      $(element).smoothIn(_ms,_callback);//渐渐显出,相当于$.fn.fadeIn();
      $(element).smoothOut(_ms,_callback);//渐渐隐藏,相当于$.fn.fadeOut(); 
      //_css : CSS | 目标CSS | 可选
      //_ms : Number | 动画运行时长 | 可选
      //_callback : Function | 回调函数 | 可选
      //_thisTween : String | 动画缓动参数,值可以设置为Linear(默认),easeIn,easeOut,easeInOut) | 可选
      $(element).smoothStop(_freeze,_through);//强制停止动画,相当于$.fn.stop();
      // _freeze:Boolean | 是否冻结当前动画 | 可选,默认true
      // _through:Boolean | 是否直达当前动画最终效果(不会执行回调函数) | 可选,默认true
      
注意事项

1....

代码下载

javascript开源代码请到github查看

责任声明
查看源网页