animated hiding divs

[dubesinhower]

i'm trying to make a site that links to different web pages that i think are awesome. each link has a picture of the site it links to.

what i would like to do is when you hover over a link, the name of the site and a description slides or fades in, and then slides or fades out when you move away.

i've already got the divs made, i just need some pointers as to how i should make the description hide and come back.

here's my site: pretty cool links

this site is where i got my inspiration: unaghii

i would like to replicate that sliding effect when you hover over a link.

thanks in advanced for any tips and ideas!

 

[websonalized]

I think jquery could facilitate the animated alide in slide out description and website link.

Chekc out their demos and documentation and decide if you want to learn how to implement, it is easy: http://jqueryui.com/demos/show/

 

[dubesinhower]

I think jquery could facilitate the animated alide in slide out description and website link.

Chekc out their demos and documentation and decide if you want to learn how to implement, it is easy: http://jqueryui.com/demos/show/

seems interesting. do you have any recommendations for guides on how to implement it?

 

[CaldwellYSR]

Here's how I would do it. Instead of the div's having background images I would put...

<style>
#link3img {
         insert whatever css you want;
}
#link3 {
         display: none;
         whatever other css you want;
}
</style>
<div class="contentLink">
        <img src="images/links/lifehacker.png" id="link3img" alt="lifehacker" />
	<a href="http://lifehacker.com/" id="link3">Lifehacker</a>
</div>

So this sets the image inside that div and the link, in the css you'll want to position those so that they overlap, however you want to do that, it's up to you. Think in your jquery you would have...

$("#link3img").hover(function() {                //This says when you hover over the image run this function.
         $("#link3img").hide(2000);              //Hides the image over 2 seconds
         $("#link3").show(2000);                 //Shows the link over the same 2 seconds
}, function() {                                  //when you take mouse away run this function
         $("#link3img").show(2000);              //show image
         $("#link3").hide(2000);                 //hide link
});

It's been a while since I've really worked too much with jquery but I think that should do what you're wanting. You'd have to use css to get the images and the links lined up correctly.

 

[PixelPusher]

Like others have mentioned, use jQuery. This can be done quite easily with their pre-built functions. Look into:

.hover(); --> detect mouse events
.animate(); --> for sliding effects, animates css properties
.fadeIn(); --> for simple fade effects
.fadeOut();

Off the top of my head you would want something like this:

$(document).ready(function () {

   $('div#trigger1').hover(function() {
      $('div#trigger1_site').fadeIn('fast');
   },
   function() {
      $('div#trigger1_site').fadeOut('fast');
   });

});

Now if you are going to want this effect for multiple divs (example sites), which it sounds like you are, you should make this more dynamic. This way you will not need a separate function for each element.