Spry Fade Effect Samples


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


Example 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.


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>

Example 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


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>

Example 3 - Fade Out from 100% to 20% in 2 seconds

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Example 4 - Fade In from 30 to 80 in 3 seconds

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



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>

Example 5 - Setup and Finish functions

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.