Jquery效果函数

Posted 2020-08-09

jQuery 效果函数

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

2.jQuery 效果 - animate() 方法

 

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

 

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 " padding: 0px;">语法 1

$(selector).animate(styles,speed,easing,callback)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 。

语法 2

$(selector).animate(styles,options)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值（同上）。
options	可选。规定动画的额外选项。 可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

3.jQuery 效果 - clearQueue() 方法

 

实例

停止当前正在运行的动画：

$("#stop").click(function(){
  $("#box").clearQueue();
});

 

定义和用法

clearQueue() 方法停止队列中所有仍未执行的函数。

与 stop() 方法不同，（只适用于动画），clearQueue() 能够清除任何排队的函数（通过 .queue() 方法添加到通用 jQuery 队列的任何函数）。

语法

$(selector).clearQueue(queueName)

参数	描述
queueName	可选。规定要停止的队列的名称。 默认是 "fx"，标准效果队列。

4.jQuery 效果 - fadeIn() 方法

 

实例

使用淡入效果来显示一个隐藏的 <p> 元素：

$(".btn2").click(function(){
  $("p").fadeIn();
});

 

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
callback	可选。fadeIn 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

5.jQuery 效果 - fadeOut() 方法

 

实例

使用淡出效果来隐藏一个 <p> 元素：

$(".btn1").click(function(){
  $("p").fadeOut();
});

 

定义和用法

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

语法

$(selector).fadeOut(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。
callback	可选。fadeOut 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

6.jQuery 效果 - fadeTo() 方法

 

实例

使用淡出效果来隐藏一个 <p> 元素：

$(".btn1").click(function(){
  $("p").fadeTo(1000,0.4);
});

 

定义和用法

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

语法

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

参数	描述
speed	可选。规定元素从当前透明度到指定透明度的速度。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"
opacity	必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback	可选。fadeTo 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

7.jQuery 效果 - hide() 方法

 

实例

隐藏可见的 <p> 元素：

$(".btn1").click(function(){
  $("p").hide();
});

 

定义和用法

如果被选的元素已被显示，则隐藏该元素。

语法

$(selector).hide(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback	可选。hide 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

8.jQuery 效果 - show() 方法

 

实例

显示出隐藏的 <p> 元素。

$(".btn2").click(function(){
  $("p").show();
});

 

定义和用法

如果被选元素已被隐藏，则显示这些元素：

语法

$(selector).show(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到完全可见的速度。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback	可选。show 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

9.jQuery 效果 - slideDown() 方法

 

实例

以滑动方式显示隐藏的 <p> 元素：

$(".btn2").click(function(){
  $("p").slideDown();
});

 

定义和用法

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

语法

$(selector).slideDown(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
callback	可选。slideDown 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

10.jQuery 效果 - slideToggle() 方法

 

实例

通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：

$(".btn1").click(function(){
  $("p").slideToggle();
});

 

定义和用法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

语法

$(selector).slideToggle(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

11.jQuery 效果 - slideUp() 方法

 

实例

以滑动方式隐藏 <p> 元素：

$(".btn1").click(function(){
  $("p").slideUp();
});

定义和用法

通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

语法

$(selector).slideUp(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。slideUp 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

12.jQuery 效果 - stop() 方法

 

实例

停止当前正在运行的动画：

$("#stop").click(function(){
  $("#box").stop();
});

 

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。 该参数只能在设置了 stopAll 参数时使用。

13.jQuery 效果 - toggle() 方法

 

实例

切换 <p> 元素的显示与隐藏状态：

$(".btn1").click(function(){
  $("p").hide();
});

 

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。   True - 显示所有元素 False - 隐藏所有元素 如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。