主题: 3024-nightambiance-mobileambiancebase16-darkblackboardcobalteclipseerlang-darklesser-darkmbomdn-likemidnightmonokaineatneonightparaiso-darkpastel-on-darkrubybluesolarizedthe-matrixtomorrow-night-eightiesvibrant-ink 新窗口 视图: 左侧面板 HTML CSS JS 预览 F11(全屏显示选中的编辑器) 查看更多帮助信息

相关文章:

jQuery.animate() 函数详解

代码类型:

默认(HTML/CSS/JS) HTML混合(单页) PHP Java C# C++ C SQL

杂项:

• 启用CSS/JS语法检查
• 监测脚本运行错误
• 禁止库文件重复

文档类型:

HTML5 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset 无

JS库文件:

无 jQuery 1.11.1jQuery 2.1.1jQuery 1.10.2jQuery 1.9.1jQuery 1.8.3jQuery 1.7.2jQuery 1.6.4jQuery 1.5.2jQuery 1.4.4jQuery 1.3.2jQuery 1.2.6

手动添加:

1. jQuery 1.11.1

<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div> 动画效果： <select id="animation"> <option value="1">动画1</option> <option value="2">动画2</option> <option value="3">动画3</option> <option value="4">动画4</option> <option value="5">动画5</option> </select> <input id="exec" type="button" value="执行动画" />

$("#exec").click( function(){ var v = $("#animation").val(); var $myDiv = $("#myDiv"); if(v == "1"){ // 数值的单位默认是px $myDiv.animate( { height: 200 } ); }else if(v == "2"){ // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px) // 多个动画连续执行 $myDiv.animate( { height: "+=300px" }, "slow" ); $myDiv.animate( { width: "50%" }, 1000 ); $myDiv.animate( { width: "200px", height: "100px" }, 1000 ); }else if(v == "3"){ // font-size或fontSize均可，由多个单词构成的属性均是如此 $myDiv.animate( { fontSize: "30px" }, 2000 ); $myDiv.animate( { fontSize: "14px" }, 2000, function(){ alert("动画3执行完毕!"); }); }else if(v == "4"){ $myDiv.animate( { width: "50%", height: "50%" }, { duration: 2000, easing: "linear" }); }else if(v == "5"){ // 根据高度切换显示/隐藏，显示时高度从0增加到原高度，隐藏时高度从原高度减小到0 $myDiv.animate( { height: "toggle" }); } } );