首页 > 代码库 > jQuery animate()动画效果
jQuery animate()动画效果
1.jQuery动画效果
jQuery animate()方法用于创建自定义动画
$(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性; //可选的 speed 参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒; //可选的 callback 参数是动画完成后所执行的函数名称;
下面为几个实例:
$("button").click(function(){ $("div").animate({ left:‘250px‘, height:‘+=150px‘, width:‘+=150px‘ }); }); //点击button按钮时div块向左右(取决于当前位置)移动的同时放大150px; //其中‘+=‘为相对变化,再次点击button时div块继续放大150px; $("button").click(function(){ var div=$("div"); div.animate({height:‘300px‘,opacity:‘0.4‘},"slow"); div.animate({width:‘300px‘,opacity:‘0.8‘},"slow"); div.animate({height:‘100px‘,opacity:‘0.4‘},"slow"); div.animate({width:‘100px‘,opacity:‘0.8‘},"slow"); }); //编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列,然后逐一运行这些 animate 调用; $("button").click(function(){ $("div").animate({ height:‘toggle‘ }); }); //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"; //点击button时,div块向上收缩,再次点击向下展开;
2.jQuery停止动画
jQuery stop() 方法用于停止动画或效果,在它们完成之前
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
$(selector).stop(stopAll,goToEnd); //可选的 stopAll 参数规定是否应该清除动画队列,默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行; //可选的 goToEnd 参数规定是否立即完成当前动画,默认是 false;
转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2257182
jQuery animate()动画效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。