display different text on different links

Question

In this when i click on photos the target div gallery gets displayed.I want to display the target div with some effects like ease-in or ease-out or slide effects etc. so that it looks more attractive.Initially the target div gallery is not displayed as in css there is display:none for gallery.I also tried the transition property for this but its not working.So plz help me with this.

<div>   
    <ul id="nav">
        <li><a href="#main">Home</a></li>
        <li id="gallary"><a href="#gallery">Photos</a></li>
    </ul>
 </div>

 <div id="gallery">
     <h3 style="font-family:'Comic Sans MS';color:white;font-size:25px;text-align:center;font-weight:bold;">GALLARY</h3>
     <div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
     <div id="gallary_images"><a href="slide3.jpg" data-lightbox="roadtrip"><img src="slide3.jpg"/></a></div>
     <div id="gallary_images"><a href="slide4.jpg" data-lightbox="roadtrip"><img src="slide4.jpg"/></a></div>
     <div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
     <div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
     <div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
</div>

the CSS for this is

#gallery:target
{
    display:block;
    }
#gallery
{
    border:solid black thin;
    display:none;
    position:absolute;
    }

Answer 1

It sounds like this jQuery function is suitable for your needs:

http://api.jquery.com/fadeIn/

There is an example on the above page, which I've modified for you to try out:

$( "#gallary" ).click(function() {
  $( "#gallery" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

I've assumed you want to click on <li id="gallary"><a href="#gallery">Photos</a></li> to make the contents of appear.

If I may add a couple of further comments - try renaming your element ids to be more descriptive, and to be aware you've used both 'gallary' and 'gallery' spellings which makes it hard to read. Also, a single id should be unique, whilst the same class can be used multiple times.

Finally - don't use comic sans! :D

Edit: I've added your extra requirement to close on backspace:

$('html').keyup(function(e){if(e.keyCode == 8)
  $( "#gallery" ).fadeOut( "slow", function() {
    // Animation complete
  });})

As I mentioned in comment 8 = backspace, 36 = escape key.