热门关键字:
jquery > jquery教程 > jquery教程 > jQuery 源码解析(三十) 动画模块 $.animate()详解,

jQuery 源码解析(三十) 动画模块 $.animate()详解,

321
作者:管理员
发布时间:2020/2/15 19:42:37
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=806

jQuery的动画模块提供了包括隐藏显示动画、渐显渐隐动画、滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列、事件等等,

$.animate()的用法如下:animate(prop,speed,easing,callback),参数如下:

  • prop   ;对象,               ;包含将要动画的样式
  • speed   ;字符串或数字    ;动画运行持续时间,单位毫秒,可以设置为"slow"、"normal"、"fast"等预定义时间
  • easing  ;字符串            ;表示所使用的缓动函数
  • callback  ;回调函数           ;当动画完成时被调用

还是举个栗子:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> div{width: 200px;height: 50px;background: #cfc;} </style> </head> <body> <button>按钮</button> <div></div> <script> $('button').click(function(){
            $('div').animate({width:'400px',height:'100px',background:'#f00'},2000,'linear',function(){alert('动画完成成功')})
        }) </script> </body> </html>




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐