Jun
23
2010

jQuery fader

An article by stefan

My friend Alex needed a little image fading effect for his blog. As an example, he gave me a nice Earth Hour gallery (i think it was the boston.com Earth Hour 2010 article). The idea is to overlap 2 images and provide a fading effect when the visitor clicks them. I’m sure there are hundreds of scripts that do the exact same thing, but I proffered to write the 10 lines of jQuery code myself.

Here’s an example of the effect: http://shakabut.com/examples/jqueryFader/.

This is the little piece of code:

<style type="text/css">

   .pictureFaderBox{

      margin:0 auto;

      cursor:pointer;

      width:640px;

      height:427px;

      clear:both;

   }

   .on, .off{

      position:absolute;

   }

   .on{

      z-index:10;

   }

   .off{

      z-index:5;

   }

</style>

<script type="text/javascript">

   $(document).ready(function() {

      $(".pictureFaderBox .on").toggle(

         function () {

            $(this).animate({opacity: 0}, 900 );

         },

         function () {

            $(this).animate({opacity: 1}, 900 )

         }

      );

   });

</script>

Also, please check Alex’s post to see a great photo project: http://3punctefoto.blogspot.com/2010/06/pitestiul-urbanizat.html. The post is in Romanian, but the pictures are not – don’t forget to click the images!