逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

<script>
$("#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 );
}
} );
</script>

 实例二、让页面中的按钮在页面加载后500毫秒隐藏，然后再过1500毫秒显示出来

$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.queue(function(){$(this).show();});
}); 

三、jquery中使用delay()注意事项

1、delay适用在jQuery动画效果和类似队列中
2、如果下一项是动画效果，则会执行延迟调用
3、如果不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。
4、如果要将不是动画效果加入延迟，则需要将它加入到queue队列中去。

例如

$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide();})
.delay(1500)
.show(1);
//.queue(function(){$(this).show();});
}); 

备注：上面方法只隐藏，不会再显示，queue执行完后，也中止了动画队列的继续执行，需要调用dequeue使其执行下去

又如

$(function(){
var $inputs = $('input[type=button]')
.delay(500)
.queue(function(){$(this).hide().dequeue();})
.delay(1500)
.show();
//.show(1);
}); 

备注：上面方法也是只隐藏，而不会再显示！这里show不再指定显示动画时长，则show方法不再是一个动画。由此可知，dequeue只能使得动画队列中的后续方法执行下去，不能使非动画队列中的jquery方法继续执行！