jQuery教程
+ -

JQuery 特效

2019-09-09 21 0

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

显示和隐藏元素

显示和隐藏元素的命令几乎与我们期望的一样- 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的基本概念。下表列出了创建各种效果的所有重要方法-

No. Methods 描述
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>
No. Methods 描述
1 Blind 将元素盲化或通过使其盲目显示。
2 Bounce 垂直或水平反射元素n次。
3 Clip 垂直或水平剪切元素。
4 Drop 删除元素或通过将其显示来显示它。
5 Explode 将元素分解为多个部分。
6 Fold 像一张纸一样折叠元素。
7 Highlight 用定义的颜色突出显示背景。
8 Puff 缩放动画和淡出动画可产生泡泡效果。
9 Pulsate 多次脉动元素的不透明度。
10 Scale 按百分比缩小或增大元素。
11 Shake 垂直或水平摇动元素n次。
12 Size 将元素调整为指定的宽度和高度。
13 Slide 将元素滑出视口。
14 Transfer 将元素的轮廓转移到另一个。

0 篇笔记 写笔记

JQuery 特效
jQuery提供了一个简单的界面来执行各种惊人的效果。jQuery方法使我们能够以最少的配置快速应用常用的效果。本教程介绍了创建视觉效果的所有重要jQuery方法。显示和隐藏元素显示和隐藏元素的命令几乎与我们期望的一样- show()将显示包装集中的元素,而 hide()将其隐藏。这是 show()......
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

您的支持,是我们前进的动力!