Jquery学习--效果、回调函数

本文介绍了jQuery中的动画效果,包括隐藏、显示、滑动、淡入淡出等,并详细解释了如何使用这些效果来丰富网页的表现形式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery可以实现各种各样的效果,比如隐藏,显示,切换,滑动等。让我们的网页丰富多彩。下面逐个说明一下这些效果。

一:隐藏和显示

通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示。
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
第一个隐藏p标签,第二个显示p标签。用法就是首先使用选择器选中当前要操作的元素,然后再使用它的方法。
这两个方法还可以添加参数和回调函数。
$(selector).hide(speed,callback)
$(selector).show(speed,callback)


第一个参数是效果的持续时间,第二个是回调函数,表示如果执行完这个效果要执行的函数。

二:滑动函数 - slideDown, slideUp, slideToggle

	$(selector).slideDown(speed,callback)
	$(selector).slideUp(speed,callback)
	$(selector).slideToggle(speed,callback)

上面分别是向下滑动,向上滑动,切换滑动。滑动就是逐渐的显示出来元素。后面同理是时间和回调函数。

三:Fade 函数

	$(selector).fadeIn(speed,callback)
	$(selector).fadeOut(speed,callback)
	$(selector).fadeTo(speed,opacity,callback)

这三个函数是逐渐显示和隐藏的函数,第一个是逐渐显示出来这个元素,第二个是逐渐隐藏出去,第三个是隐藏到某个指定的透明度。

下面表格列出了常用的一些jQuery效果函数。

函数描述
$(selector).hide()隐藏被选元素
$(selector).show()显示被选元素
$(selector).toggle()切换(在隐藏与显示之间)被选元素
$(selector).slideDown()向下滑动(显示)被选元素
$(selector).slideUp()向上滑动(隐藏)被选元素
$(selector).slideToggle()对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()淡入被选元素
$(selector).fadeOut()淡出被选元素
$(selector).fadeTo()把被选元素淡出为给定的不透明度
$(selector).animate()对被选元素执行自定义动画

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值