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() 对被选元素进行隐藏和显示的切换

 

 

 

 

 

 

 

posted @ 2014-05-06 16:59  似水若冰  阅读(312)  评论(0编辑  收藏  举报