jquery 动画 效果 显示
Jqury 1.4API文档见附件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery 动画效果</title>
<script type="text/javascript" src="jquery1-6-1.js"></script>
<script>
$(document).ready(function(){
// 隐藏与显示的切换
$("button").click(function(){
$("#test").toggle(2000);
});
// 上下滑动的切换
$("#wo").click(function(){
$("#head").slideToggle(2000);
});
});
</script>
</head>
<body>
<p style="display:none;">
$(selector).hide(speed,callback) // 隐藏<br />
$(selector).show(speed,callback) // 显示<br />
speed参数可以设置这些值： slow,fast,normal 或 milliseconds<br />
// 切换与滑动<br />
$(selector).toggle(speed.callback) // 切换功能<br />
toggle()函数使用show()或hide()函数来切换html元素，同一个按钮可以点击两次，<br />
实现隐藏和显示的效果<br />
$(selector).slideDown(speed,callback) // 向下滑动，并显示隐藏<br />
$(selector).slideUp(speed,callback) // 向上滑动，并隐藏遮挡<br />
$(selector).siideToggle(speed,callback) // 上下滑动，实现切换<br />
// 淡入淡出和动画<br />
$(selector).fadeOut(speed,callback) //变淡至空<br />
$(selector).fadeIn(speed,callback) //变亮至全部<br />
$(selector).fadeTo(speed,opacity,callback) // 变淡至制定效果，亮度值用0.0 -1.0之间<br />
$(selector).animate({params},duration,easing,callback) // 动画<br />
变化后的css效果，变化速度用毫秒，变化效果的名称，实现动画后调用的函数<br />
</p>
<div id="test" style="background:yellow;width:300px;height:300px;"></div>
<button type="button">按钮</button>
<div id="mydiv" style="width:800px; height:80px; background:red;">
<div id="head" style="width:800px; height:50px; background:green;">这里是我的内容，有是会出现有时不会出现</div>
<div id="foot" style="width:800px; height:30px;"><a style="cursor:pointer;" id="wo">点击我试试</a></div>
</div>
</body>
</html>
$("button").click(function(){
$("#test").toggle(2000);
});
// 上下滑动的切换
$("#wo").click(function(){
$("#head").slideToggle(2000);
});
});
</script>
</head>
<body>
<p style="display:none;">
$(selector).hide(speed,callback) // 隐藏<br />
$(selector).show(speed,callback) // 显示<br />
speed参数可以设置这些值： slow,fast,normal 或 milliseconds<br />
// 切换与滑动<br />
$(selector).toggle(speed.callback) // 切换功能<br />
toggle()函数使用show()或hide()函数来切换html元素，同一个按钮可以点击两次，<br />
实现隐藏和显示的效果<br />
$(selector).slideDown(speed,callback) // 向下滑动，并显示隐藏<br />
$(selector).slideUp(speed,callback) // 向上滑动，并隐藏遮挡<br />
$(selector).siideToggle(speed,callback) // 上下滑动，实现切换<br />
// 淡入淡出和动画<br />
$(selector).fadeOut(speed,callback) //变淡至空<br />
$(selector).fadeIn(speed,callback) //变亮至全部<br />
$(selector).fadeTo(speed,opacity,callback) // 变淡至制定效果，亮度值用0.0 -1.0之间<br />
$(selector).animate({params},duration,easing,callback) // 动画<br />
变化后的css效果，变化速度用毫秒，变化效果的名称，实现动画后调用的函数<br />
</p>
<div id="test" style="background:yellow;width:300px;height:300px;"></div>
<button type="button">按钮</button>
<div id="mydiv" style="width:800px; height:80px; background:red;">
<div id="head" style="width:800px; height:50px; background:green;">这里是我的内容，有是会出现有时不会出现</div>
<div id="foot" style="width:800px; height:30px;"><a style="cursor:pointer;" id="wo">点击我试试</a></div>
</div>
</body>
</html>