|
<div id='ctt' style='margin-left: 50px; color: white'>
<input type="button" name="name" value="show()显示效果" onclick='show3()' />
<input type="button" name="name" value="hide()隐藏效果" onclick='hide3()' />
<input type="button" name="name" value="toggle()隐藏显示自动切换" onclick='toggle3()' />
<input type="button" name="name" value="slideDown()" onclick='slide3()' />
<input type="button" name="name" value="toggle" onclick='toggle3()' />
<input type="button" name="name" value="fadeIn3" onclick='fadeIn3()' />
<input type="button" name="name" value="自定义左到右消失" onclick='animate3()'/>
<input type="button" name="name" value="自定义右到左展开" onclick='animate4()'/>
<div id='div1' style=' color:Yellow; height: 80px; display: none; overflow:hidden'>
<div id="div1span"> I am a div!</div>
</div>
</div>
<script type="text/javascript"> function show3() {
/*【.show(speed,easong,fn)】
会把display为none的div（已经是show的则没有效果），从上到下（同时从左到右）在1000毫秒内展示；
第一个参数： 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；
第二个参数：默认是"swing"，可用参数"linear"，通常不写；
第三个参数：可写可不写，表示完成后执行函数
局限性：从上到下（同时从左到右），方向的不可控性；
*/
$("#div1").show(1000, "swing", function () { alert("动画显示完成!"); });
}
function hide3() {
/*
hide()同show();
*/
$("#div1").hide(1000, "swing", function () { alert("动画隐藏完成!"); });
}
function toggle3() {
/*
自动判断，是隐藏则显示；是显示则隐藏
*/
$("#div1").toggle(1000, "swing", function () { alert("动画自处理完成!"); });
}
function slide3() {
/*
slideDown()向下显示，show()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开;
slideUp()向上隐藏, hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏
*/
$("#div1").slideDown(1000, "swing", function () { alert("动画显示完成!"); });
}
function toggle3() {
/*
slideToggle垂直方向上自动切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。
*/
$("#div1").toggle(1000, "swing", function () { alert("动画显示完成!"); });
}
function fadeIn3() {
/*
fadeIn() 以改变透明度来显示;
fadeOut() 以改变透明度来隐藏;
fadeToggle() 以改变透明度来切换显示隐藏状态;
*/
$("#div1").fadeIn(3000, function () { alert("淡入显示成功!"); });
}
function fadeto3() {
/*
fadeTo() 由指定的时间将透明度改变到指定的透明度
*/
$("#div1").fadeTo(3000, 0.22, function () { alert("透明度改变成功!"); });
}
function animate3() {
/*
animate(params,speed,easing,callback); 样式参数，时间，可选择，函数
其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
*/
$("#div1").animate({"width":"0px","marginLeft":"50px"},3000);
//这样就模拟地呈现出了 自左向右的隐藏
}
function animate4() {
$("#div1").animate({ "": "", "": "" }, 3000);
}
</script> |