一篇文章带你了解jQuery动画

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了一篇文章带你了解jQuery动画脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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执行完以后函数执行完之后,要实行的函数

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!

脚本宝典总结

以上是脚本宝典为你收集整理的一篇文章带你了解jQuery动画全部内容,希望文章能够帮你解决一篇文章带你了解jQuery动画所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: