Spry Fade Effect Samples

The default Fade effect behaviour will increase the opacity of a given element from 0 to 100 in 1 second.

Toggle

Toggle will reverse the effect on the subsequent click. Toggle is an option in the constructor.

<script type="text/javascript">
 var secondFade = new Spry.Effect.Fade('second', {toggle:true});
</script>

From, To, Duration

You can set the "From" and "To" opacity levels and the duration of the effect by setting options in the constructor.

<script type="text/javascript">
 var thirdFade = new Spry.Effect.Fade('third', {duration: 2000, from: 100, to: 20, toggle:true});
</script>

Setup, Finish functions

Setup and Finish functions allow you to run other functions before the effect begins and after the effect finishes. This is usefull when you try to modify other page elements while the effect is running, do other computation etc.

<script type="text/javascript"> var animation_start = function(){
   var button = document.getElementById('button_animation');
   if (button){
   button.disabled = true;
   button.style.backgroundColor = 'white';
   }
   } var animation_stop = function(){
   var button = document.getElementById('button_animation');
   if (button){
   button.disabled = false;
   button.style.backgroundColor = '';
   }
   } 
  var fifthFade = new Spry.Effect.Fade('fifth', {setup: animation_start, finish:animation_stop, duration: 1000, from: 100, to: 0, toggle:true});
   </script>