`
夏末忆逝
  • 浏览: 147759 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery学习笔记-动画

阅读更多
jquery的动画效果,最简单的当属于hide(),show();这两个函数.
但这两种效果并未体现出较好的动画效果,下面几种方式可以使页面效果更具创意
1.show(),hide()添加参数 fast slow normal 毫秒
例:show("fast"),hide(3000);
2.fadeIn(),fadeOut()参数fast slow normal 毫秒
例:fadeIn("slow"),fadeOut(3000);
3.slideDown(),slideUp()参数fast slow normal 毫秒
例:slideDown("fast"),slideUp(3000)
show().hide().动画会减少"内容"的宽度,高度,透明度
fadeIn(),fadeOut()动画只改变内容的透明度,不改变其高度和宽度
slideUp(),slideDown()动画使元素从上到下或从下到上延伸展示

更丰富的动画效果
animate(params,speed,callback)
params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2"}
speed:速度参数(可选)
callback:在动画完成时执行的函数(可选)
例:$("div").animate({height:"+=50"},3000,function(){});
多个动画执行会按照顺序执行,非动画操作需要使用callback来执行,否则不会按照预期动画顺序执行,非动画操作会立即执行

fadeTo(speed,transparency )  transparency:透明度
例:fadeTo(3000,0.2)只改变元素的透明度

当在一个animate()方法中应用多个属性时,动画是同时发生的
当以链式写法应用动画方法时,动画是按照顺序发生的
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics