1 ?/** 2 ?????????????* 【JQ基础动画】 3 ?????????????* ?show() 显示 4 ?????????????* ?hide() 隐藏 5 ?????????????* ?toggle() 切换 6 ?????????????* ?????默认无动画，如果要产生动画 7 ?????????????* ?????在括号内，添加毫秒数，可产生动画和控制动画的快慢 8 ?????????????* 9 ?????????????* ?《滑动动画》10 ?????????????* ?????slideDown() 滑动显示(下)11 ?????????????* ?????slideUp() ??滑动隐藏(上)12 ?????????????* ?????slideToggle 滑动切换13 ?????????????* ?????????默认有动画，默认是400毫秒14 ?????????????* ??《淡入淡出动画》15 ?????????????* ?????fadeIn() ???????????淡入显示16 ?????????????* ?????fadeOut() ??????????淡出显示17 ?????????????* ?????fadeToggle() ???????切淡18 ?????????????* ?????fadeTo(时间,透明度) ??设置透明度19 ?????????????*/
一.基础动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="lib/jquery-1.12.2.js"></script> 7 ????<script> 8 ????????$(function () { 9 ???????????$(‘button:eq(0)‘).click(function () {10 ???????????????$(‘img‘).show(1000);11 ???????????});12 13 ????????????$(‘button:eq(1)‘).click(function () {14 ????????????????$(‘img‘).hide(1000);15 ????????????});16 17 ????????????$(‘button:eq(2)‘).click(function () {18 ????????????????$(‘img‘).toggle(1000);19 ????????????});20 ????????});21 ????</script>22 </head>23 <body>24 ???<button>显示</button>25 ???<button>隐藏</button>26 ???<button>切换</button><br/>27 ???<img src="images/1.gif" >28 </body>29 </html>二.滑动动画
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 400px; ???????????background-color: pink; ???????} ???</style> ???<script src="lib/jquery-1.12.2.js"></script> ???<script> ???????$(function () { ???????????$(‘button‘).eq(0).click(function () { ????????????????$(‘.box‘).slideDown(); ???????????}); ???????????$(‘button‘).eq(1).click(function () { ????????????????$(‘.box‘).slideUp(); ???????????}); ???????????$(‘button‘).eq(2).click(function () { ????????????????$(‘.box‘).slideToggle(); ???????????}); ???????}); ???</script></head><body> ???<button>显示</button> ???<button>隐藏</button> ???<button>切换</button> ???<br> ???<!--<img src="images/1.gif" ?width="150" height="440">--> ???<div class="box"></div></body></html>三.淡入淡出动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.box{ 8 ????????????width: 200px; 9 ????????????height: 400px;10 ????????????background-color: pink;11 ????????}12 ????</style>13 ????<script src="lib/jquery-1.12.2.js"></script>14 ????<script>15 ????????$(function () {16 ????????????$(‘button‘).eq(0).click(function () {17 ?????????????????$(‘.box‘).fadeIn();18 ????????????});19 ????????????$(‘button‘).eq(1).click(function () {20 ?????????????????$(‘.box‘).fadeOut();21 ????????????});22 ????????????$(‘button‘).eq(2).click(function () {23 ?????????????????$(‘.box‘).fadeToggle(1000);24 ????????????});25 ????????????$(‘button‘).eq(3).click(function () {26 ????????????????$(‘.box‘).fadeTo(400,0.3);27 ????????????});28 ????????});29 ????</script>30 </head>31 <body>32 ????<button>显示</button>33 ????<button>隐藏</button>34 ????<button>切换</button>35 ????<button>透明度</button>36 ????<br>37 ????<!--<img src="images/1.gif" ?width="150" height="440">-->38 ????<div class="box"></div>39 </body>40 </html>四.自定义动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.main{ 8 ????????????width: 100px; 9 ????????????height: 100px;10 ????????????background-color: pink;11 ????????????/*transition: all .4s;*/12 ????????}13 ????</style>14 ????<script src="lib/jquery-1.12.2.js"></script>15 ????<script>16 ????????$(function () {17 ????????????????/**18 ?????????????????* ?自定义动画(兼容IE678.)19 ?????????????????* ??其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题20 ?????????????????* ??????移动端项目的时候，直接使用CSS3实现效果即可21 ?????????????????* ??????PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数22 ?????????????????*23 ?????????????????* ??有动画的属性：24 ?????????????????* ?????值是数字的属性：（颜色，文本居中这些就实现不了）25 ?????????????????* ??核心函数26 ?????????????????* ?????.animate({属性集合})27 ?????????????????*28 ?????????????????* */29 30 31 32 ????????????????//（颜色，文本居中这些就实现不了动画）33 ????????????????$(‘button‘).click(function () {34 ????????????????????$(‘.main‘).animate({35 ????????????????????????"width":"300px",36 ????????????????????????"height":"300px",37 ????????????????????????"backgroundColor":"#f90",38 ????????????????????????"textAlign":"center",39 ????????????????????????"lineHeight":"300px"40 ????????????????????},300);41 ????????????????});42 ????????});43 ????</script>44 </head>45 <body>46 <button>动起来</button>47 <div class="main">48 ????文字行号49 </div>50 </body>51 </html>JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画
原文地址：http://www.cnblogs.com/mrszhou/p/7774616.html