一篇文章带你了解jQuery动画_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 slow  normal   

参数二：回调函数，可选 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 slow  normal

参数二：回调函数，可选 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()    使元素逐渐延伸显示

slideUp()        使元素逐渐缩短直至隐藏

语法：  

$(\”selector\”).slideUp([speed],[callback]);
$(\”selector\”).slideDown([speed],[callback]);

参考描述：

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

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注3399IT网的更多内容！

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com