jQuery-效果 - 芒果文档

📌 相关文章

📜 jQuery-效果

📅 最后修改于: 2020-10-23 08:19:26 🧑 作者: Mango

jQuery提供了一个简单的界面来执行各种惊人的效果。 jQuery方法使我们能够以最少的配置快速应用常用的效果。本教程介绍了创建视觉效果的所有重要jQuery方法。

显示和隐藏元素

显示和隐藏元素的命令几乎与我们期望的一样-show（）显示包装集中的元素，而hide（）隐藏它们。

句法

这是show（）方法的简单语法-

[selector].show( speed, [callback] );

这是所有参数的描述-

速度-代表三个预定义速度（“慢”，“正常”或“快”）之一或运行动画的毫秒数（例如1000）的字符串。
callback-此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

以下是hide（）方法的简单语法-

[selector].hide( speed, [callback] );

这是所有参数的描述-

速度-代表三个预定义速度（“慢”，“正常”或“快”）之一或运行动画的毫秒数（例如1000）的字符串。
callback-此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例

考虑以下带有小的JQuery编码的HTML文件-

现场演示

The jQuery Example
      
        
      
        
      
   
    
   
      
         This is a SQUARE

这将产生以下结果-

切换元素

jQuery提供了在显示或隐藏之间切换元素显示状态的方法。如果最初显示该元素，则它将被隐藏；如果隐藏，它将显示出来。

句法

这是toggle（）方法之一的简单语法-

[selector]..toggle([speed][, callback]);

这是所有参数的描述-

速度-代表三个预定义速度（“慢”，“正常”或“快”）之一或运行动画的毫秒数（例如1000）的字符串。
callback-此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

例

我们可以设置任何元素的动画，例如包含图像的简单

现场演示

The jQuery Example
      
        
      
        
      
   
    
   
      
         Click Me

这将产生以下结果-

jQuery效果方法

您已经了解了jQuery Effects的基本概念。下表列出了创建各种效果的所有重要方法-

Sr.No.	Methods & Description
1	animate( params, [duration, easing, callback] ) A function for making custom animations.
2	fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
3	fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to “none” and firing an optional callback after completion.
4	fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
5	hide( ) Hides each of the set of matched elements if they are shown.
6	hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion.
7	show( ) Displays each of the set of matched elements if they are hidden.
8	show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion.
9	slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion.
10	slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
11	slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion.
12	stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements.
13	toggle( ) Toggle displaying each of the set of matched elements.
14	toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
15	toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
16	jQuery.fx.off Globally disable all animations.

基于UI库的效果

要使用这些效果，您可以从jQuery UI库下载最新的jQuery UI库jquery-ui-1.11.4.custom.zip ，也可以使用Google CDN以与对jQuery相似的方式使用它。

我们已在HTML页面中使用以下代码段将Google CDN用于jQuery UI，因此我们可以使用jQuery UI-

Sr.No.	Methods & Description
1	Blind Blinds the element away or shows it by blinding it in.
2	Bounce Bounces the element vertically or horizontally n-times.
3	Clip Clips the element on or off, vertically or horizontally.
4	Drop Drops the element away or shows it by dropping it in.
5	Explode Explodes the element into multiple pieces.
6	Fold Folds the element like a piece of paper.
7	Highlight Highlights the background with a defined color.
8	Puff Scale and fade out animations create the puff effect.
9	Pulsate Pulsates the opacity of the element multiple times.
10	Scale Shrink or grow an element by a percentage factor.
11	Shake Shakes the element vertically or horizontally n-times.
12	Size Resize an element to a specified width and height.
13	Slide Slides the element out of the viewport.
14	Transfer Transfers the outline of an element to another.