关注我们

jQuery - Effects操作

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

显示和隐藏元素

显示(show)和隐藏(hide)元素的命令几乎与期望一样- show()将显示元素，而 hide()将其隐藏。

这是 show()方法的简单语法-

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

这是所有参数的描述-

speed - 代表三个预定义速度("slow"，"normal"或"fast")之一或运行动画的毫秒数(如1000)的字符串)。
callback - 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

以下是 hide()方法的简单语法-

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

这是所有参数的描述-

speed - 代表三个预定义速度("slow"，"normal"或"fast")之一或运行动画的毫秒数(如1000)的字符串)。
callback - 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

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

复制代码

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
                
         });
      </script>
        
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
    
   <body>
      <div class="mydiv">
         This is a SQUARE
      </div>

      <input id="hide" type="button" value="Hide" />   
      <input id="show" type="button" value="Show" />
   </body>
</html>

运行上面代码输出

切换元素(Toggle)

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

这是 toggle()方法之一的简单语法-

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

这是所有参数的描述-

speed - 代表三个预定义速度("slow"，"normal"或"fast")之一或运行动画的毫秒数(如1000)的字符串)。
callback - 此可选参数表示动画完成时要执行的函数；对每个动画元素执行一次。

无涯教程可以设置任何元素的动画

复制代码

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
        
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
        
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
    
   <body>
      <div class="content">
         <div class="clickme">Click Me</div>
         <div class="target">
            <img src="./images/jquery.jpg" alt="jQuery" />
         </div>
         <div class="log"></div>
      </div>
   </body>
</html>

运行上面代码输出

jQuery效果方法

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

Sr.No.	Methods & Remark
1	animate( params, [duration, easing, callback] ) 制作自定义动画的函数。
2	fadeIn( speed, [callback] ) 通过调整它们的不透明度来淡入所有匹配的元素，并在完成后触发可选的回调。
3	fadeOut( speed, [callback] ) 通过将所有匹配的元素的不透明度调整为0，淡出所有匹配的元素，然后将显示设置为"无"，并在完成后触发可选的回调。
4	fadeTo( speed, opacity, callback ) 将所有匹配元素的不透明度降低为指定的不透明度，并在完成后触发可选的回调。
5	hide( ) 如果显示了每个匹配元素，则将它们隐藏。
6	hide( speed, [callback] ) 使用优美的动画隐藏所有匹配的元素，并在完成后触发可选的回调。
7	show( ) 如果每个匹配的元素被隐藏，则显示它们。
8	show( speed, [callback] ) 使用优美的动画显示所有匹配的元素，并在完成后触发可选的回调。
9	slideDown( speed, [callback] ) 通过调整它们的高度并在完成后触发一个可选的回调来显示所有匹配的元素。
10	slideToggle( speed, [callback] ) 通过调整所有匹配元素的高度并在完成后触发可选回调来切换可见性。
11	slideUp( speed, [callback] ) 通过调整它们的高度并在完成后触发一个可选的回调来隐藏所有匹配的元素。
12	stop( [clearQueue, gotoEnd ]) 在所有指定的元素上停止所有当前正在运行的动画。
13	toggle( ) 切换显示每个匹配元素集。
14	toggle( speed, [callback] ) 使用优美的动画切换显示每个匹配元素的集合，并在完成后触发可选的回调。
15	toggle( switch ) 切换基于该Switch显示匹配元素集的每个元素(true显示所有元素，false隐藏所有元素)。
16	jQuery.fx.off 全局禁用所有动画。

基于UI库的效果

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

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Methods & Remark
1	Blind 将元素盲化或通过使其盲目显示。
2	Bounce 垂直或水平反射元素n次。
3	Clip 垂直或水平剪切元素。
4	Drop 删除元素或通过将其显示来显示它。链接：https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-effects.html 来源：LearnFk无涯教程网
5	Explode 将元素分解为多个部分。
6	Fold 像一张纸一样折叠元素。
7	Highlight 用定义的颜色突出显示背景。
8	Puff 缩放动画和淡出动画可产生泡泡效果。
9	Pulsate 多次脉动元素的不透明度。
10	Scale 按百分比缩小或增大元素。
11	Shake 垂直或水平摇动元素n次。
12	Size 将元素调整为指定的宽度和高度。
13	Slide 将元素滑出视口。
14	Transfer 将元素的轮廓转移到另一个。无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Selenium自动化测试实战 -〔郭宏志〕

Linux内核技术实战课 -〔邵亚方〕

云时代的JVM原理与实战 -〔康杨〕

AI大模型企业应用实战 -〔蔡超〕

好记忆不如烂笔头。留下您的足迹吧 :)