jQuery设计动画

一、显隐效果

show()
show(duration,[callback])
show([duration],[easing],[callback])

参数说明：
duration：为一个字符串或者数字，决定动画将运行多久
callback：表示在动画完成时执行的函数。
easing：为一个字符串，用来表示哪个缓冲区来过渡。(没用过....)

案例：

<html><head><title>JQuery</title><style>#p1{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;}</style><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></head><body><script>$(function(){var t=1;$("input").click(function(){t++;if(t%2==0){$("div").show(500);}else{$("div").hide(500);}})});</script><input type="button" value="hide Element"> <div id="p1"></div></body>
</html>

<html><head><title>JQuery</title><style>div{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;float: left;margin-left: 30px;}</style><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></head><body><script>$(function(){for(var i=0;i<5;i++){$("<div>").appendTo(document.body);}$("div").click(function(){$(this).hide(500,function(){$(this).remove();});});});</script><div></div></body>
</html>

二、显隐切换

toggle([duration],[callback])
toggle([duration],[easing],[callback])
toggle(showOrHide)

参数说明：
showOrHide:是一个布尔值，表示是否显示或隐藏的元素。

<html><head><title>JQuery</title><style>div{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;margin-left: 30px;}</style><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></head><body><script>$(function(){$("button").click(function(){$("div").toggle("slow");})})</script><button>显示和隐藏</button><div></div></body>
</html>

三、滑动效果

滑动方法：

slideDown() //向下滑动，作用于隐藏的元素
slideUp()//向上滑动，作用于显示的元素

实例：

<html><head><title></title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script></head><body><script>$(function(){$("button").click(function(){$(this).parent().slideUp("slow",function(){$("#msg").text($("button",this).text()+"已经实现。");});});});</script><style type="text/css">div{margin: 2px;}</style><div><button>隐藏文本框1</button><input type="text" value="文本框1" /></div><div><button>隐藏文本框2</button><input type="text" value="文本框2" /></div><div><button>隐藏文本框3</button><input type="text" value="文本框3"></div><div id="msg"></div></body>
</html>