Interesting jQuery effect

May 25, 2009 by Emanuele Feronato
Filed Under Javascript • 2 Comments

You know I am trying to use Gallery theme for triqui.com

Yesterday I played a bit with the theme and I completely screwed everything… something like “how to destroy a complex theme in a matter of minutes”.

Then I decided to code something similar by myself. That’s the only way I know to custom everything whenever I want.

One of the best features of Gallery theme is the slider effect, so I played a bit with jQuery until I achieved something similar.

I have to say I tried to make it with Scriptaculous but for these simple effects nothing beats jQuery in my opinion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
     <script type="text/javascript" src="jquery.js"></script>
     <script>
          $(document).ready(function(){
               $("#text").stop().fadeTo("slow",0);
               $("#container").mouseover(function(){
                    $("#block").stop().animate({"marginTop": "-30px"}, "fast","linear",function(){$("#text").stop().fadeTo("slow",1);});
               });
               $("#container").mouseout(function(){
                    $("#text").stop().fadeTo("slow",0);
                    $("#block").stop().animate({"marginTop": "0px"}, "fast");
               });
          });
     </script>
     <style type="text/css"> 
     #container{
          border:1px solid black;
          width:100px;
          height:100px;
          overflow:hidden;
     }
     #block{
          padding:0px
     }
     #text{
          font:normal 10px verdana;
     }
     </style>
</head>
 
<body>
     <div id = "container">
          <div id="block">
               <img src = "image.png">
               <div id ="text">
                    Not the classic "Lorem Ipsum"
               </div>
          </div>
     </div>
</body>
 
</html>

Line 6: importing jQuery library

Line 8: we can call it a listener for the document to be ready. When it’s ready, it executes the function

Line 9: fading the content of the text element to transparent. This way I am starting with a transparent text. Obviously I can set this from the css declaration, but I wanted to do it with jQuery because it’s cool :)

Line 10: this is a listener for the container element. Listens for the mouse to be over it.

Line 11: stopping previous animations and moving the block element (the image with the text) up by 25 pixels and once the animation finishes, fades in the text element. This replicates the Gallery rollover effect, and I can display text on multiple rows. The overlow:hidden style at line 24 gives the feeling the image is sliding like a garage door and not simply moving.

Do not use relative positioning in block element or it won’t work on IE7 (yet anohter IE7 bug…)

Line 13: listener for the mouse leaving the container element

Line 14: fading away text element and moving the block element to its original position

And this is the result. As you can see it’s pretty similar to the original Gallery effect.

Move the mouse on the image and see

Download the source code with jQuery compressed library.

Rate this post: 1 Star