jQuery动画：
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <div></div> </body>
1.jQuery.show()和jQuery.hide() 显示与隐藏
<script> /* 1.jQuery.show()和jQuery.hide() 显示与隐藏 a.不传参数，没有动画效果，show()：直接显示 hide()：直接隐藏，比较常用 b.show(speed)和hide(speed) speed:动画的持续时间 ，可以是毫秒值 ，还可以是固定字符串 fast:200ms normal:400ms slow:600ms c.show([speed], [callback])和hide([speed],[ callback]) [ ]中括号表示可选择参数，并非表示数组 callback: 回调函数 */ $(function () { $("input").eq(0).click(function () { $("div").show(1000, function () { console.log("哈哈，动画执行完成啦"); }) }); $("input").eq(1).click(function () { $("div").hide(); }) }); </script>
2.滑入滑出动画
<script> $(function () { //滑入（slideDown） 滑出：slideU // jQuery.slideDown()滑入动画:从上往下显示 // jQuery.slideUp()滑出动画:从下往上隐藏 // jQuery.slideToggle()如果是滑入状态，就执行滑出的动画，如果是滑出状态，则不操作 // 用法和jQuery.show()和jQuery.hide()用法一样， // 不同是如果不传speed参数，默认为normal $("input").eq(0).click(function () { $("div").slideDown(1000, function () { console.log("额呵呵"); }); }); $("input").eq(1).click(function () { $('div').slideUp(); }) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画， $('div').slideToggle(); }) }); </script>
3.淡入淡出动画
<script> $(function () { //淡入：fadeIn 淡出：fadeOut 切换：fadeToggle //jQuery.fadeIn()淡入动画 //jQuery.fadeOut()淡出动画 //jQuery.fadeToggle()如果是淡入状态，就执行淡出动画，如果为淡出状态，则不操作 //用法和jQuery.show()和jQuery.hide()用法一样， //不同是如果不传speed参数，默认为normal $("input").eq(0).click(function () { $("div").fadeIn(2000); }); $("input").eq(1).click(function () { $("div").fadeOut(1000); }) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画， $('div').fadeToggle(); }) }); </script>
4.自定义动画
jQuery.animate(json,speed,easing, callback);
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } #box2 { background-color: blue; margin-top: 150px; } #box3 { background-color: yellowgreen; margin-top: 300px; } </style> </head> <body> <input type="button" value="开始"> <input type="button" value="结束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //第一个参数：对象，里面可以传需要动画的样式 //第二个参数：speed 动画的执行时间 //第三个参数：动画的执行效果 //第四个参数：回调函数 $("#box1").animate({left:800}, 8000); //swing:秋千 摇摆 $("#box2").animate({left:800}, 8000, "swing"); //linear:线性 匀速 $("#box3").animate({left:800}, 8000, "linear", function () { console.log("hahaha"); }); }) }); </script> </body> </html>