third-party/jquery-ui-1.10.2/demos/tooltip/custom-animation.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Tooltip - Custom animation demo</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-explode.js"></script>
  14         <link rel="stylesheet" href="../demos.css">
  15         <script>
  16         $(function() {
  17                 $( "#show-option" ).tooltip({
  18                         show: {
  19                                 effect: "slideDown",
  20                                 delay: 250
  21                         }
  22                 });
  23                 $( "#hide-option" ).tooltip({
  24                         hide: {
  25                                 effect: "explode",
  26                                 delay: 250
  27                         }
  28                 });
  29                 $( "#open-event" ).tooltip({
  30                         show: null,
  31                         position: {
  32                                 my: "left top",
  33                                 at: "left bottom"
  34                         },
  35                         open: function( event, ui ) {
  36                                 ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  37                         }
  38                 });
  39         });
  40         </script>
  41 </head>
  42 <body>
  43
  44 <p>There are various ways to customize the animation of a tooltip.</p>
  45 <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
  46 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
  47 <p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
  48
  49 <div class="demo-description">
  50 <p>This demo shows how to customize animations using the show and hide options,
  51 as well as the open event.</p>
  52 </div>
  53 </body>
  54 </html>