[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Easing Effects',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Easings',
  13                  desc: 'Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/>' +
  14                      'An ease-in starts slow and then speeds up.<br/>' +
  15                      'An ease-out starts fast and then slows to a stop.<br/>' +
  16                      'An ease-in-out combines the two so that the first half is an ease-in and the second half is an ease-out.',
  17                  html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' +
  18                      '<div><img id="bounce" src="templates/images/puppy.jpg"/></div>',
  19                  destroy: '$("#doBounce").unbind();',
  20  
  21                  options: [
  22                      {    desc: 'Linear easing',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "linear", times: 1}, 2000); });' },
  23                      {    desc: 'Swing easing',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "swing", times: 1}, 2000); });' },
  24                      {    desc: 'Quadratic ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 2000); });' },
  25                      {    desc: 'Quadratic ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuad", times: 1}, 2000); });' },
  26                      {    desc: 'Quadratic ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuad", times: 1}, 2000); });' },
  27                      {    desc: 'Cubic ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 2000); });' },
  28                      {    desc: 'Cubic ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 2000); });' },
  29                      {    desc: 'Cubic ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 2000); });' },
  30                      {    desc: 'Quartic ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 2000); });' },
  31                      {    desc: 'Quartic ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 2000); });' },
  32                      {    desc: 'Quartic ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuart", times: 1}, 2000); });' },
  33                      {    desc: 'Quintic ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 2000); });' },
  34                      {    desc: 'Quintic ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 2000); });' },
  35                      {    desc: 'Quintic ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuint", times: 1}, 2000); });' },
  36                      {    desc: 'Sinusoidal ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInSine", times: 1}, 2000); });' },
  37                      {    desc: 'Sinusoidal ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutSine", times: 1}, 2000); });' },
  38                      {    desc: 'Sinusoidal ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutSine", times: 1}, 2000); });' },
  39                      {    desc: 'Exponential ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInExpo", times: 1}, 2000); });' },
  40                      {    desc: 'Exponential ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutExpo", times: 1}, 2000); });' },
  41                      {    desc: 'Exponential ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutExpo", times: 1}, 2000); });' },
  42                      {    desc: 'Circular ease in',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 2000); });' },
  43                      {    desc: 'Circular ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 2000); });' },
  44                      {    desc: 'Circular ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCirc", times: 1}, 2000); });' },
  45                      {    desc: 'Elastic ease in (decaying sine wave)',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInElastic", times: 1}, 2000); });' },
  46                      {    desc: 'Elastic ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 2000); });' },
  47                      {    desc: 'Elastic ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutElastic", times: 1}, 2000); });' },
  48                      {    desc: 'Back ease in (overshooting cubic)',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBack", times: 1}, 2000); });' },
  49                      {    desc: 'Back ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 2000); });' },
  50                      {    desc: 'Back ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 2000); });' },
  51                      {    desc: 'Bounce ease in (decaying parabolic)',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBounce", times: 1}, 2000); });' },
  52                      {    desc: 'Bounce ease out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 2000); });' },
  53                      {    desc: 'Bounce ease in out',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBounce", times: 1}, 2000); });' },
  54                  ]
  55              },
  56  
  57              {
  58                  title: 'Easings 2',
  59                  desc: 'Click within the bounded area to move the icon with the selected easing.',
  60                  html: { url: 'templates/ui.effects.easing.ex2.html' },
  61                  destroy: '$("#area").unbind();',
  62  
  63                  options: [
  64                      {    desc: 'Linear easing',    source: '$("#area").click(function(event) { moveToHere(event, "linear"); });' },
  65                      {    desc: 'Swing easing',    source: '$("#area").click(function(event) { moveToHere(event, "swing"); });' },
  66                      {    desc: 'Quadratic ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInQuad"); });' },
  67                      {    desc: 'Quadratic ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuad"); });' },
  68                      {    desc: 'Quadratic ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuad"); });' },
  69                      {    desc: 'Cubic ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInCubic"); });' },
  70                      {    desc: 'Cubic ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutCubic"); });' },
  71                      {    desc: 'Cubic ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCubic"); });' },
  72                      {    desc: 'Quartic ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInQuart"); });' },
  73                      {    desc: 'Quartic ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuart"); });' },
  74                      {    desc: 'Quartic ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuart"); });' },
  75                      {    desc: 'Quintic ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInQuint"); });' },
  76                      {    desc: 'Quintic ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuint"); });' },
  77                      {    desc: 'Quintic ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuint"); });' },
  78                      {    desc: 'Sinusoidal ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInSine"); });' },
  79                      {    desc: 'Sinusoidal ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutSine"); });' },
  80                      {    desc: 'Sinusoidal ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutSine"); });' },
  81                      {    desc: 'Exponential ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInExpo"); });' },
  82                      {    desc: 'Exponential ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutExpo"); });' },
  83                      {    desc: 'Exponential ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutExpo"); });' },
  84                      {    desc: 'Circular ease in',    source: '$("#area").click(function(event) { moveToHere(event, "easeInCirc"); });' },
  85                      {    desc: 'Circular ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutCirc"); });' },
  86                      {    desc: 'Circular ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCirc"); });' },
  87                      {    desc: 'Elastic ease in (decaying sine wave)',    source: '$("#area").click(function(event) { moveToHere(event, "easeInElastic"); });' },
  88                      {    desc: 'Elastic ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutElastic"); });' },
  89                      {    desc: 'Elastic ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutElastic"); });' },
  90                      {    desc: 'Back ease in (overshooting cubic)',    source: '$("#area").click(function(event) { moveToHere(event, "easeInBack"); });' },
  91                      {    desc: 'Back ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutBack"); });' },
  92                      {    desc: 'Back ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBack"); });' },
  93                      {    desc: 'Bounce ease in (decaying parabolic)',    source: '$("#area").click(function(event) { moveToHere(event, "easeInBounce"); });' },
  94                      {    desc: 'Bounce ease out',    source: '$("#area").click(function(event) { moveToHere(event, "easeOutBounce"); });' },
  95                      {    desc: 'Bounce ease in out',    source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBounce"); });' },
  96                  ]
  97              }
  98  
  99          ]
 100  
 101      };
 102  
 103      $(function(){
 104  
 105          uiRenderDemo(model);
 106  
 107      });
 108  
 109  </script>