Categories
JqueryUI教程

jQuery UI效果

jQuery UI效果

effect()方法用于将动画效果应用于元素,而不必显示或隐藏它。这是用于管理jQuery UI视觉效果的方法之一。

句法:

.effect( effect [, options ] [, duration ] [, complete ] ) 

effect()方法的参数:

  • 效果:此参数指定用于过渡的效果。
  • 选项:用于指定效果的特定设置和缓动。每个效果都有其自己的一组选项。
  • 持续时间:这指定持续时间并指示效果的毫秒数。其默认值为400。
  • 完成:这是一种回调方法。当元素的效果完成时,将为每个元素调用该函数。

最常用的jQuery UI效果:

添加表格:

Effect Description
Blind Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.
Bounce Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
Clip Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
Explode Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
Drop Shows or hides the element by making it appear to drop onto, or drop off of, the page.
Fade Shows or hides the element by adjusting its opacity. this is the same as the core fade effects, but without options.
Fold Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
Highlight Calls attention to the element by momentarily changing its background color while showing or hiding the element.
Puff Expands or contracts the element in place while adjusting its opacity.
Shake Shakes the element back and forth, either vertically or horizontally.
Scale Expands or contracts the element by a specified percentage.
Pulsate Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
Size Resizes the element to a specified width and height. similar to scale except for how the target size is specified.
Slide Moves the element such that it appears to slide onto or off of the page.
Transfer Animates a transient outline element that makes the element appear to transfer to another element. the appearance of the outline element must be defined via css rules for the ui-effects-transfer class, or the class specified as an option.

jQuery Shake效果示例1

1.震动效果:

让我们以一个示例来指定抖动效果。

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "shake", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Shake Me!</b></div>
</body>
</html>

jQuery跳动效果示例2

2.弹跳效果:

让我们以一个示例来指定反弹效果。

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-1 {
            height: 50px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-1').click(function() {
               $( "#box-1" ).effect( "bounce", {
                  times: 10,
                  distance: 150
               }, 3000, function() {
               $( this ).css( "background", "#ff4040" );
            });
         });
      });
</script>
</head>
<body>
<div id="box-1">Click here to<br/><b>Bounce Me!</b></div>
</body>
</html>

jQuery爆炸效果示例3

3.爆炸效果:

让我们以一个示例来指定爆炸效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "explode",
                  easing: "easeInExpo",
                  pieces: 16,
                  duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Explode Me!</b></div>
   </body>
</html>

jQuery盲效果示例4

4.盲效应:

让我们以一个示例来指定盲效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
            background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "blind",
                 duration:0
              });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Blind Me!</b></div>
   </body>
</html>

jQuery Clip Effect示例5

5.剪辑效果:

让我们以一个示例来指定剪辑效果:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "clip",
                duration: 2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Clip Me!</b></div>
   </body>
</html>

jQuery Drop Effect示例6

6.掉落效果:

让我们以一个示例来指定放置效果:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "drop",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Drop Me!</b></div>
   </body>
</html>

jQuery Fade效果示例7

7.淡入淡出效果:

让我们以一个示例来指定淡入淡出效果:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fade",
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fade Me!</b></div>
   </body>
</html>

jQuery折叠效果示例8

8.折叠效果:

让我们以一个示例来指定折叠效果:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 500px;
            width: 500px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "fold",
                  duration: 5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Fold Me!</b></div>
   </body>
</html>

jQuery Highlight效果示例9

9.突出显示效果:

让我们以一个示例来指定突出显示效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "highlight",
                 duration:2000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Highlight Me!</b></div>
   </body>
</html>

jQuery吹效果示例10

10.泡芙效果:

让我们以一个示例来指定粉扑效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "puff",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Puff Me!</b></div>
   </body>
</html>

jQuery Scale效果示例11

11.缩放效果:

让我们以一个示例来指定缩放效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "scale" );
});
</script>
</body>
</html>

jQuery Pulsate Effect示例12

12.脉动效应:

让我们以一个示例来指定脉动效果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 100px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "pulsate",
                duration:5000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Pulsate Me!</b></div>
   </body>
</html>

jQuery Size Effect示例13

13.尺寸效应:

让我们举个例子来调整盒子的大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scale demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #7fffd4;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the size of the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "size" );
});
</script>
</body>
</html>

jQuery Slide Effect示例14

14.幻灯片效果:

让我们以一个示例来指定幻灯片效果:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI effect Example</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         #box-2 {
            height: 100px;
            width: 200px;
                       background: #7fffd4;
         }
      </style>
      <script>
         $(document).ready(function() {
            $('#box-2').click(function() {
               $( "#box-2" ).effect({
                  effect: "slide",
                 duration:1000
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="box-2">Click here to<br/><b>Slide Me!</b></div>
   </body>
</html>
error: 内容受到保护 !!