third-party/jquery-ui-1.10.2/tests/visual/effects/effects.js

   1 $(function() {
   2
   3 var duration = 1000,
   4         wait = 500;
   5
   6 function effect( elem, name, options ) {
   7         $.extend( options, {
   8                 easing: "easeOutQuint"
   9         });
  10
  11         $( elem ).click(function() {
  12                 $( this )
  13                         .addClass( "current" )
  14                         // delaying the initial animation makes sure that the queue stays in tact
  15                         .delay( 10 )
  16                         .hide( name, options, duration )
  17                         .delay( wait )
  18                         .show( name, options, duration, function() {
  19                                 $( this ).removeClass( "current" );
  20                         });
  21         });
  22 }
  23
  24 $( "#hide" ).click(function() {
  25         $( this )
  26                 .addClass( "current" )
  27                 .hide( duration )
  28                 .delay( wait )
  29                 .show( duration, function() {
  30                         $( this ).removeClass( "current" );
  31                 });
  32 });
  33
  34 effect( "#blindLeft", "blind", { direction: "left" } );
  35 effect( "#blindUp", "blind", { direction: "up" } );
  36 effect( "#blindRight", "blind", { direction: "right" } );
  37 effect( "#blindDown", "blind", { direction: "down" } );
  38
  39 effect( "#bounce3times", "bounce", { times: 3 } );
  40
  41 effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
  42 effect( "#clipVertically", "clip", { direction: "vertical" } );
  43
  44 effect( "#dropDown", "drop", { direction: "down" } );
  45 effect( "#dropUp", "drop", { direction: "up" } );
  46 effect( "#dropLeft", "drop", { direction: "left" } );
  47 effect( "#dropRight", "drop", { direction: "right" } );
  48
  49 effect( "#explode9", "explode", {} );
  50 effect( "#explode36", "explode", { pieces: 36 } );
  51
  52 effect( "#fade", "fade", {} );
  53
  54 effect( "#fold", "fold", { size: 50 } );
  55
  56 effect( "#highlight", "highlight", {} );
  57
  58 effect( "#pulsate", "pulsate", { times: 2 } );
  59
  60 effect( "#puff", "puff", { times: 2 } );
  61 effect( "#scale", "scale", {} );
  62 effect( "#size", "size", {} );
  63 $( "#sizeToggle" ).click(function() {
  64         var options = { to: { width: 300, height: 300 } };
  65         $( this )
  66                 .addClass( "current" )
  67                 .toggle( "size", options, duration )
  68                 .delay( wait )
  69                 .toggle( "size", options, duration, function() {
  70                         $( this ).removeClass( "current" );
  71                 });
  72 });
  73
  74 $( "#shake" ).click(function() {
  75         $( this )
  76                 .addClass( "current" )
  77                 .effect( "shake", {}, 100, function() {
  78                         $( this ).removeClass( "current" );
  79                 });
  80 });
  81
  82 effect( "#slideDown", "slide", { direction: "down" } );
  83 effect( "#slideUp", "slide", { direction: "up" } );
  84 effect( "#slideLeft", "slide", { direction: "left" } );
  85 effect( "#slideRight", "slide", { direction: "right" } );
  86
  87 $( "#transfer" ).click(function() {
  88         $( this )
  89                 .addClass( "current" )
  90                 .effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
  91                         $( this ).removeClass( "current" );
  92                 });
  93 });
  94
  95 $( "#addClass" ).click(function() {
  96         $( this ).addClass( "current", duration, function() {
  97                 $( this ).removeClass( "current" );
  98         });
  99 });
 100 $( "#removeClass" ).click(function() {
 101         $( this ).addClass( "current" ).removeClass( "current", duration );
 102 });
 103 $( "#toggleClass" ).click(function() {
 104         $( this ).toggleClass( "current", duration );
 105 });
 106
 107 });