主题:
3024-night
ambiance-mobile
ambiance
base16-dark
blackboard
cobalt
eclipse
erlang-dark
lesser-dark
mbo
mdn-like
midnight
monokai
neat
neo
night
paraiso-dark
pastel-on-dark
rubyblue
solarized
the-matrix
tomorrow-night-eighties
vibrant-ink
新窗口
视图:
左侧面板
HTML
CSS
JS
预览
F11(全屏显示选中的编辑器)
查看更多帮助信息
相关文章:
jQuery.delay() 函数详解
代码类型:
默认(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.1
jQuery 2.1.1
jQuery 1.10.2
jQuery 1.9.1
jQuery 1.8.3
jQuery 1.7.2
jQuery 1.6.4
jQuery 1.5.2
jQuery 1.4.4
jQuery 1.3.2
jQuery 1.2.6
手动添加:
jQuery 1.11.1
<p>动画效果: <select id="animation"> <option value="1">动画1</option> <option value="2">动画2</option> <option value="3">动画3</option> <option value="4">动画4</option> </select> <input id="exec" type="button" value="执行动画" > </p> <div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
$("#exec").click( function(){ var v = $("#animation").val(); var $myDiv = $("#myDiv"); if(v == "1"){ $myDiv.slideUp( 1000 ) .delay( "slow" ) .fadeIn( 1500 ); }else if(v == "2"){ $myDiv.fadeOut( "slow" ) .delay( 2000 ) .slideDown( 1000 ) .animate( { height: "+=300" } ); }else if(v == "3"){ /* 注意:只有动画才会被加入效果队列中 以下代码实际上只有slideUp()、slideDown()会加入效果队列 delay()的延迟只对slideDown()起作用 show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束) 以下代码的执行顺序时: 1、slideUp()被加入队列、开始执行, 2、show()也开始执行,它立即执行完毕,此时slideUp()的动画尚未执行结束 3、延迟2秒 4、执行SlideDown() */ $myDiv.slideUp( "slow" ) .delay( 2000 ) .show( ) // 它不是一个效果动画 .slideDown( ); }else if(v == "4"){ $myDiv.show() .delay( 2000 ) // 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px) .animate( { height: "+=300px" }, 2000 ) .animate( { width: "50%" }, 1000 ) .animate( { width: "200px", height: "100px" }, 1000 ); } } );