w3school---jQuery 效果

http://www.w3school.com.cn/jquery/jquery_hide_show.asp

1、显示和隐藏 show(),hide()

$(selector).hide(speed,callback);    $(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

 toggle() 方法来切换 hide() 和 show() 方法。  $(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 2、淡入、淡出 

jQuery 拥有下面四种 fade 方法:

$(selector).fade*(speed,callback);       speed可以取以下值:"slow"、"fast" 或毫秒。
  • fadeIn()用于淡入已隐藏的元素。
  • fadeOut()用于淡出可见元素。
  • fadeToggle()可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  • fadeTo()允许渐变为给定的不透明度(值介于 0 与 1 之间)。$(selector).fadeTo(speed,opacity,callback);   opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

3、滑动 

jQuery 拥有以下滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle() 
语法:$(selector).slideDown(speed,callback);

4、jQuery 动画 - animate() 方法 

  语法:$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

 需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。 

 使用相对值需要在值的前面加上 += 或 -=: width:'+=150px' 
队列功能:多个animate() 逐一执行。

5、jQuery 停止动画

$(selector).stop(stopAll,goToEnd);

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

6、CallBack

Callback 函数在当前动画 100% 完成之后执行。

由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

7、jQuery - Chaining

通过 jQuery,您可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。

例如: $("#p1").css("color","red").slideUp(2000).slideDown(2000);
提示:当进行链接时,代码行会变得很差。不过,jQuery 在语法上不是很严格;您可以按照希望的格式来写,包含折行和缩进。

jQuery 效果函数

方法描述
animate()对被选元素应用“自定义”的动画
clearQueue()对被选元素移除所有排队的函数(仍未运行的)
delay()对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()运行被选元素的下一个排队函数
fadeIn()逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo()把被选元素逐渐改变至给定的不透明度
hide()隐藏被选的元素
queue()显示被选元素的排队函数
show()显示被选的元素
slideDown()通过调整高度来滑动显示被选元素
slideToggle()对被选元素进行滑动隐藏和滑动显示的切换
slideUp()通过调整高度来滑动隐藏被选元素
stop()停止在被选元素上运行动画
toggle()对被选元素进行隐藏和显示的切换

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/zmxie/p/3709648.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值