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>

四、滑动切换

slideToggle([duration],[callback])
slideToggle([durantion],[easing],[callback])

jQuery设计动画相关推荐

放弃使用jQuery实现动画
在 Web开发的圈子里,开发者常常认为CSS动画是一种高性能web动画技术,如果想让网页加载的更快一些,就应该用纯CSS动画.其实这种观点是错误的, 很多开发者早就放弃了javascript的动画,迫 ...
[转]jQuery设计思想
转自:http://kb.cnblogs.com/page/109875/ jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远 ...
HTML期末大作业学生DW静态网页设计动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源
HTML5期末大作业`动画漫影视网站设计--动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wHTML期末大作业学生DW静态网页设计 html大作 ...
js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现一.总结一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...

jQuery设计动画

一、显隐效果

二、显隐切换

三、滑动效果

四、滑动切换

jQuery设计动画相关推荐

最新文章

热门文章