third-party/jquery-ui-1.10.2/tests/visual/tooltip/animations.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Tooltip Visual Test: Animations</title>
   6         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.core.js"></script>
   9         <script src="../../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../../ui/jquery.ui.position.js"></script>
  11         <script src="../../../ui/jquery.ui.tooltip.js"></script>
  12         <script src="../../../ui/jquery.ui.effect.js"></script>
  13         <script src="../../../ui/jquery.ui.effect-blind.js"></script>
  14         <script src="../../../ui/jquery.ui.effect-bounce.js"></script>
  15         <script src="../../../ui/jquery.ui.effect-drop.js"></script>
  16         <script src="../../../ui/jquery.ui.effect-explode.js"></script>
  17         <style>
  18         pre {
  19                 width: 250px;
  20                 border: 1px solid #000;
  21                 padding: .5em;
  22         }
  23         </style>
  24         <script>
  25         $(function() {
  26                 $( "pre" ).each(function( index, elem ) {
  27                         $( elem )
  28                                 .attr( "title", "animated tooltips" )
  29                                 .tooltip( $.parseJSON( $( elem ).text() ) );
  30                 });
  31         });
  32         </script>
  33 </head>
  34 <body>
  35
  36 <pre>{}</pre>
  37 <pre>{
  38   "show": {
  39     "effect": "slideDown"
  40   },
  41   "hide": {
  42     "effect": "slideUp"
  43   }
  44 }</pre>
  45 <pre>{
  46   "show": {
  47     "effect": "explode"
  48   },
  49   "hide": {
  50     "effect": "explode"
  51   }
  52 }</pre>
  53 <pre>{
  54   "show": {
  55     "effect": "bounce"
  56   },
  57   "hide": {
  58     "effect": "blind"
  59   }
  60 }</pre>
  61 <pre>{
  62   "show": {
  63     "effect": "drop",
  64     "direction": "right"
  65   },
  66   "hide": {
  67     "effect": "drop",
  68     "direction": "right"
  69   }
  70 }</pre>
  71
  72 </body>
  73 </html>