jquery 动画学习
在学习的时候,以前只知道用javascript,去写页面前端,感觉这样比jquery好,但是工作了才发现原因jquery的使用比js效率高很多,很多地方都做了很好的封装,而且还提供了很多的插件,在web前端的时候的确是很好的选择,因为以前没有了解过jquery的动画,当时想的是用js实现,但是想了一下,感觉太麻烦了,而且还不一定能够实现,最后就去找jquery,没想到jquery却有这样封装好的函数,真是太欣喜了,于是到了w3cschool去学习了简单的教程,嗯,是挺简单的,动画函数其实不多,但是组合起来那就千变万化了
1.显示和隐藏($('p').hide()和$('p').show())语法:($(selecter).hide(speed,callback))
以前用的最多的是层的显示和隐藏,如果要隐藏某个html元素的话,需要把它们装到层里面去,而且麻烦,但是现在好了,而且还可以设置他们参数为slow($('p').hide("slow");)这样的话看起来就有动态的效果了.
2.第二个函数相对于隐藏和显示还有更简单的一个函数方法$('seleter').toggle(speed,callback);
这个方法相当于只用一个函数方法就可以实现html元素的显示和隐藏了,感觉就像在后台写了一个计数器,i++一样。因为没有去看过源代码,所以不知道后台的实现。
3.(slideUp(speed,callback),slideDown(speed,callback),slideToggle(speed,callback))
这三个函数是jquery的滑动函数,分别是向下滑动,向上滑动,和切换滑动,都还是比较简单,尤其是在做层的显示和隐藏的效果的时候,很有用,在浏览器的上边和下边,隐藏在那个地方都可以。
4.(fadeIn(speed,callback),fadeOut(speed,callback),fadeTo(speed,opactiy,callback))
就是jquery的几个淡入淡出的效果了,也还是比较适用,第一个淡入直至完全显示,第二个淡出直至完全消失,第三个显示和淡出到一个什么透明度.
5.就是比较灵活的jquery的自定义的动画了(animate({param},speed,easing,callback))
第三个参数一般都不填或为null,如果要被动画的html元素动起来,那就必须要设置属性position:relative或absolute。
$("#start").click(function(){ $("#box").animate({height:300},"slow").animate({width:300},"slow").animate({height:100},"slow").animate({width:100},"slow"); });