显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div></div> <!--<button>显示</button> <button>隐藏</button>--> <button>显示隐藏</button> </body> <script type="text/javascript"> // $('button:eq(1)').click(function(){ // $('div').hide(3000) // }) // $('button:eq(0)').click(function(){ // $('div').show(3000) // }) // $('button').click(function(){ // $('div').toggle(3000) // }) // $('button').click(function(){ // $('div').toggle(3000,function(){ // alert('哈哈哈哈') // }) // }) </script> </html>slideUp() 上隐藏 slideDown() 下显示 slideToggle() 上下切换
上下隐藏显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div></div> <button>显示</button> <button>隐藏</button> <button>显示隐藏</button> </body> <script type="text/javascript"> // $('button:eq(1)').click(function(){ // $('div').slideUp(3000) // }) // $('button:eq(0)').click(function(){ // $('div').slideDown(3000) // }) // $('button:eq(2)').click(function(){ // $('div').slideToggle(3000) // }) </script> </html>fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 切换淡入淡出 fadeTo(秒数，透明度)
淡入淡出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div></div> <button>淡入</button> <button>淡出</button> <button>淡入淡出</button> <button>透明度</button> </body> <script type="text/javascript"> $('button:eq(1)').click(function(){ $('div').fadeOut(3000) }) $('button:eq(0)').click(function(){ $('div').fadeIn(3000) }) $('button:eq(2)').click(function(){ $('div').fadeToggle(3000) }) $('button:eq(3)').click(function(){ $('div').fadeTo(3000,.2) }) </script> </html>animate() 自定义动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; position: absolute; top:100px; left:100px; } </style> <!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>--> <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.color.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div>呵呵哈哈哈</div> <button>点击</button> </body> <script type="text/javascript"> $('button').click(function(){ $('div').animate({ 'width':'300px', 'height':'300px', 'font-size':'100px', 'color':'yellow', 'backgroundColor':'blue', 'left':'200px', 'top':'200px' },3000) }) </script> </html>stop() 停止 (只能停止当前的列队动画) delay() 延迟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; color:blue; position: absolute; top:50px; left:0; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button>点击开始</button><button>点击停止</button> <div>哈哈</div> </body> <script type="text/javascript"> $('button').eq(0).click(function(){ $('div').animate({width:'300px'},2000) .animate({height:'300px'},1000) .animate({left:'300px'},1000) .animate({top:'300px'}) }) $('button').eq(1).click(function(){ $('div').stop(true) }) // $('button').eq(0).click(function(){ // $('div').delay(3000).animate({width:'300px'},2000) // .animate({height:'300px'},2000) // }) </script> </html>