How can I make a DIV slide in and out?

Question

I am currently learning jQuery. I\'d like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:

htt

Answer 1

Here's what i have so far:

$(document).ready(function() {
$('.inner').hide(); 
  $("button").click(function() {
    $("#static_image").hide();   
    $('.inner').slideToggle(300);
  });
});

So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.

One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.

Answer 2

In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().

$('#mydiv').animate({
    height: 500px
  }, 5000, function() {
    // Animation complete.
  });

This will slide the div to 500px, which will take 5 seconds.

Answer 3

Check out slideToggle

Answer 4

if you want a div to slideDown() first it has to hidden. so use $("#div_Id").hide(); after that use $("#div_Id").slideDown('slow'); this will work