1、隐藏与显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(1000);/*慢慢隐藏*/ }); $("#show").click(function(){ $("p").show(1000);/*慢慢显示*/ }); $("#btn3").click(function(){ $("p").toggle(1000);/*一个按钮实现隐藏和显示*/ }); }); </script> </head> <body> <p>p元素</p> <button id="hide">删除</button> <button id="show">显示</button> <button id="btn3">隐藏/显示</button> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hide demo</title> <style> div { background: #ece023; width: 30px; height: 40px; margin: 2px; float: left; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div></div> <script> for ( var i = 0; i < 5; i++ ) { $( "<div>" ).appendTo( document.body ); } $( "div" ).click(function() { $( this ).hide( 2000, function() { $( this ).remove();/*这条语句是在动画执行完成之后再执行的， 否则在外面就是意思就是直接删除，就会看不到动画效果了*/ }); }); </script> </body> </html>
2、淡入淡出
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
3、滑动
slideDown()
slideToggle()
slideUp()
4、回调
回调函数，看jquery官方文档介绍是在动画执行完成之后执行该回调函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#button").click(function () { /*p元素先改变css样式，然后再向上滑动1秒，再向下滑动1秒*/ $("p").css("color", "red").slideUp(1000).slideDown(1000); }); }); </script> </head> <body> <p>这里是p元素</p> <button id="button">点击按钮</button> </body> </html>