<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="./jquery-1.8.3.js"></script> <style> div{ 300px; height: 300px; background: pink; display: none; } </style> </head> <body> <button>show(显示)</button> <button>hide(隐藏)</button> <button>slidedown(向下滑动)</button> <button>slidup(向上滑动)</button> <button>fadeIn(淡入)</button> <button>fadeOut(淡出)</button> <button>animate自动动画</button> <div></div> <script> // 显示 $('button').eq(0).click(function(){ // show()第一个参数可以执行事件,动画执行结束之后做的事情 $('div').show(1000,function(){ alert('1'); }); }) $('button').eq(1).click(function(){ // hide()隐藏 $('div').hide(1000,function(){ console.log('2'); }); }) // slidedown() 滑动效果向下滑动 $('button').eq(2).click(function(){ $('div').slideDown(function(){ console.log('到底了吧'); }); }) // slidup() 滑动效果向上滑动 $('button').eq(3).click(function(){ $('div').slideUp(function(){ console.log('到顶了吧'); }); }) // fadeIn() 淡入 $('button').eq(4).click(function(){ $('div').fadeIn(1000,function(){ console.log('淡进来了吧'); }); }) // fadeOut() 淡出 $('button').eq(5).click(function(){ $('div').fadeOut(1000,function(){ console.log('淡出了吧'); }); }) // animate 自定义动画 // 第一个参数是对象 设置的样式 第二个参数是来设置动画时间 $('button').eq(6).click(function(){ $('div').animate({ '500px', height:'500px', borderRadius:'50%', },1000) }) </script> </body> </html>