jQuery UI Functional Test Suite

Say it in Smalltalk, Do it with jQuery

Basic Effects

For additional documentation and examples please visit the official web-site.

Demo

Smalltalk

JQEffectFunctionalTest>>renderContentOn: html
   html paragraph class: 'actions'; with: [
      #( bounce highlight pulsate shake size transfer ) do: [ :each |
         html anchor
            onClick: (self
               perform: each asMutator
               with: (html jQuery: '.box') effect);
            with: each ] ].
   self renderBoxOn: html

JQEffectFunctionalTest>>bounce: anEffect
   ^ anEffect bounce; easing: 'linear'; times: 2

JQEffectFunctionalTest>>highlight: anEffect
   ^ anEffect highlight; color: '#f00'

JQEffectFunctionalTest>>pulsate: anEffect
   ^ anEffect pulsate times: 2

JQEffectFunctionalTest>>shake: anEffect
   ^ anEffect shake; distance: 10; times: 2

JQEffectFunctionalTest>>size: anEffect
   ^ anEffect effect; size; toWidth: 50; toHeight: 25

JQEffectFunctionalTest>>transfer: anEffect
   ^ anEffect transfer; to: 'h1.logo a'; slow

Source

< =>
  < =>bounce</>
  < =>highlight</>
  < =>pulsate</>
  < =>shake</>
  < =>size</>
  < =>transfer</>
</>
< =>
  < =></>
</>
< =>/*<![CDATA[*/$("#id29").bind("click",function(){$(".box").effect("bounce",{"easing":"linear","times":2})});$("#id30").bind("click",function(){$(".box").effect("highlight",{"color":"#f00"})});$("#id31").bind("click",function(){$(".box").effect("pulsate",{"times":2})});$("#id32").bind("click",function(){$(".box").effect("shake",{"distance":10,"times":2})});$("#id33").bind("click",function(){$(".box").effect("size",{"to":{"width":50,"height":25}})});$("#id34").bind("click",function(){$(".box").effect("transfer",{"to":"h1.logo a"},"slow")});/*]]>*/</>