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

转载于:https://www.cnblogs.com/BHfeimao/p/6496655.html

jQuery animate()动画效果相关推荐

jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...
jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...
jQuery基本动画效果
jQuery基本动画效果 1.show() 用于显示页面元素与之相对应的hide() 测试案例: <p title="标题">测试</p> <ul s ...
JQuery渐变色动画效果
JQuery渐变色动画效果 jquery.gradientify.min.js插件渐变色插件链接在页面中引入js库与插件 <script src="js\jquery-3.0.0. ...
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画方式一: $("div"). ...
jquery中动画效果的函数
在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueu ...
jQuery之动画效果
1.show()显示效果语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

jQuery animate()动画效果

jQuery animate()动画效果相关推荐

最新文章

热门文章