一篇文章带你了解jQuery动画一篇文章带你了解jQuery动画

1.控制元素的显示与隐藏 show() hide()
2.控制元素的透明度 fadeIn() fadeOut()
3：控制元素的高度 slideUp() slideDown()
总结

jQuery提供了一些默认的动画控制元素的显示与隐藏show() hide() 控制元素的透明度fadeIn() fadeOut() 控制元素的高度slideUp()slideDown() 自定义动画animate()

1.控制元素的显示与隐藏 show() hide() 语法：

$("selector").show([speed],[callback]);

参考描述：
参数一：速度，可选例如：1000毫秒等等与1秒 fast slownormal
参数二：回调函数，可选 show或hide函数执行完之后，要实行的函数

$(function () {$(".nav-ul li").on({"mouseover":function () {$(this).css("background","pink")},"mouseout":function () {$(this).css("background","#ff2832")}}); $(".menu-btn").hover(function () {$(this).next().show("fast")},function () {$(this).next().hide("slow")})})

2.控制元素的透明度 fadeIn() fadeOut() 语法：

$("selector").fadeIn([speed],[callback]); $("selector").fadeOut([speed],[callback]);

参考描述：

参数一：速度，可选默认是0例如：1000毫秒等等与1秒 fast slownormal

参数二：回调函数，可选 fadeIn或fadeOut执行完以后函数执行完之后，要实行的函数

$(function () {$("input[name='fadein_btn']").click(function () {$("img:eq(0)").fadeIn(500,function () {alert("淡入成功")})})$("input[name='fadeout_btn']").click(function () {$("img:eq(0)").fadeOut(1000,function () {alert("淡出成功")})}) })

3：控制元素的高度 slideUp() slideDown() slideDown()使元素逐渐延伸显示

【一篇文章带你了解jQuery动画】slideUp()使元素逐渐缩短直至隐藏

语法：