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执行完以后函数执行完之后，要实行的函数

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue框架怎样实现树状表格，代码是什么

  这篇文章主要为大家详细介绍了vue实现树状表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Fiber是什么，执行原理如何理解

  这篇文章主要为大家介绍了react fiber执行原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vue项目中mockjs怎么用，具体步骤是怎样

  这篇文章主要给大家介绍了关于在Vue项目中使用mock.js的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用Node.js如何实现自动生成依赖，具体怎么做

  怎么用 Node.js 辅助 imgcook 自动生成依赖？下面本篇文章就来给大家介绍一下生成方法，有一定的参考价值，希望对大家有所帮助！

• js怎样写验证码功能？动态验证码如何实现？

  我们在登录或者注册网页账号的时候，往往需要输入验证码，那么验证码是如何实现的呢？下面就给大家分享一下关于使用JS实现验证码的内容，包括普通的验证码和带干扰项的动态验证码，效果如下图所示，感兴趣的朋友可以看看。