show(秒数) 显示 hide(秒数) 隐藏 toggle() 切换显示/隐藏
slideUp() 上隐藏 slideDown() 下显示 slideToggle() 上下切换
fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 切换淡入淡出 fadeTo(秒数，透明度)
animate() 自定义动画 动画当中想要改变颜色（字体/背景），需要下载js/jquery.color.js这个插件
stop() 停止 (只能停止当前的列队动画) true、false delay() 延迟
显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div></div> <button>显示</button> <button>隐藏</button> <button>显示隐藏</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // $('button').eq(1).click(function(){ // $('div').hide(300)//方法里面添加时间参数 毫秒 // }) // $('button').eq(0).click(function(){ // $('div').show(1000) // }) // $('button').eq(2).click(function(){ // $('div').toggle(1000) // }) // $('button').eq(2).click(function(){ // $('div').toggle(1000,function(){ // alert('哈哈哈哈') // }) // }) </script> </html>淡入淡出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div></div> <button>淡出</button> <button>淡入</button> <button>淡出淡入</button> <button>透明度</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // $('button').eq(1).click(function(){ // $('div').fadeIn(1300)//方法里面添加时间参数 毫秒 // }) // $('button').eq(0).click(function(){ // $('div').fadeOut(1000) // }) // $('button').eq(2).click(function(){ // $('div').fadeToggle(1000) // }) $('button').eq(3).click(function(){ $('div').fadeTo(1000,.2) }) </script> </html>动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; color: #fff; position: absolute; top:100px; } </style> </head> <body> <div>哈哈哈</div> <button>点击</button> </body> <!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>--> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ $('div').animate({ width:'300px', height:'300px', 'top':'300px', 'left':'300px', 'color':'yellow', 'backgroundColor':'blue', 'font-size':'50px' },2000) }) </script> </html>列队动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; color: #fff; position: absolute; top:100px; } </style> </head> <body> <div>哈哈哈</div> <button>点击</button> </body> <!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>--> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery.color.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ $('div').animate({ width:'300px', height:'300px', 'top':'300px', 'left':'300px', 'color':'yellow', 'backgroundColor':'blue', 'font-size':'50px' },2000) }) </script> </html>