手记

jQuery各种动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <style type="text/css">
 #d1
 {
 background-color:Red;
 width:400px;
 height:400px;
 }
 </style>
 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 //往右下方放
 $("#btn1").click(function () {
 $("#d1").show(3000);
 });
 //往左上收
 $("#btn2").click(function () {
 $("#d1").hide("slow");
 });
 //来回显示和回收
 $("#btn3").click(function () {
 $("#d1").toggle(1000);
 })
 //暂停
 $("#btn4").click(function () {
 $("#d1").stop();
 })
 //垂直往上
 $("#btn5").click(function () {
 $("#d1").slideUp(3000);
 })
 //垂直向下
 $("#btn6").click(function () {
 $("#d1").slideDown(3000);
 })
 //模仿QQ效果
 $("#d1").click(function () {
 $("#d1").slideUp(3000);
 })
 //颜色变暗,退出
 $("#btn7").click(function () {
 $("#d1").fadeOut(3000);
 })
 //颜色变亮,显示
 $("#btn8").click(function () {
 $("#d1").fadeIn(3000);
 })
 })
 </script>
 </head>
 <body>
 <div id="d1">
 </div>
 <input id="btn1" type="button" value="show"/><br />
 <input id="btn2" type="button" value="hide"/><br />
 <input id="btn3" type="button" value="toggle"/><br />
 <input id="btn4" type="button" value="stop"/><br />
 <input id="btn5" type="button" value="slideUp"/><br />
 <input id="btn6" type="button" value="slideDown"/><br />
 <input id="btn7" type="button" value="fadeOut"/><br />
 <input id="btn8" type="button" value="fadeIn"/><br />
 </body>
 </html>
 

0人推荐
随时随地看视频
慕课网APP