Jun
23
2010

jQuery fader

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!

PS: If you like nice interface elements, check our web agency website and contact us.

Related Posts

About the Author: Ștefan Nicolae

Leave a comment