jQuery Functional Test Suite

Say it in Smalltalk, Do it with jQuery

Animations

Demo

Smalltalk

JQAnimateFunctionalTest>>renderContentOn: html
   html paragraph class: 'actions'; with: [
      self renderRelativeOn: html.
      self renderAbsoluteOn: html.
      self renderToggleOn: html ].
   self renderSeastarOn: html

JQAnimateFunctionalTest>>renderRelativeOn: html
   html anchor
      onClick: ((html jQuery: #seastar) animate left: '-=100px');
      with: 'Move Left'.
   html anchor
      onClick: ((html jQuery: #seastar) animate left: '+=100px');
      with: 'Move Right'

JQAnimateFunctionalTest>>renderAbsoluteOn: html
   html anchor
      onClick: ((html jQuery: #seastar) animate opacity: 0.0);
      with: 'Opacity 0%'.
   html anchor
      onClick: ((html jQuery: #seastar) animate opacity: 0.5);
      with: 'Opacity 50%'.
   html anchor
      onClick: ((html jQuery: #seastar) animate opacity: 1.0);
      with: 'Opacity 100%'

JQAnimateFunctionalTest>>renderToggleOn: html
   html anchor
      onClick: ((html jQuery: #seastar) animate width: 'toggle');
      with: 'Toggle Width'.
   html anchor
      onClick: ((html jQuery: #seastar) animate height: 'toggle');
      with: 'Toggle Height'

JQAnimateFunctionalTest>>renderSeastarOn: html
   html paragraph id: 'seastar'; with: [
      html image
         altText: 'Seaside';
         url: (JQAllFunctionalTestsLibrary urlOf: #seastarPng) ]

Source

< =>
  < =>Move Left</>
  < =>Move Right</>
  < =>Opacity 0%</>
  < =>Opacity 50%</>
  < =>Opacity 100%</>
  < =>Toggle Width</>
  < =>Toggle Height</>
</>
< =>
  < = =/>
</>
< =>/*<![CDATA[*/$("#id17").bind("click",function(){$("#seastar").animate({"left":"-=100px"},{})});$("#id18").bind("click",function(){$("#seastar").animate({"left":"+=100px"},{})});$("#id19").bind("click",function(){$("#seastar").animate({"opacity":0.0},{})});$("#id20").bind("click",function(){$("#seastar").animate({"opacity":0.5},{})});$("#id21").bind("click",function(){$("#seastar").animate({"opacity":1.0},{})});$("#id22").bind("click",function(){$("#seastar").animate({"width":"toggle"},{})});$("#id23").bind("click",function(){$("#seastar").animate({"height":"toggle"},{})});/*]]>*/</>