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:

/

If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?

Would the .slideDown() method work?

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:

http://www.karenmillen./

If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?

Would the .slideDown() method work?

• javascript
• jquery
• html

• 1 I can't find the effect you're seeing... – Andrew Whitaker Commented Jan 4, 2011 at 3:39

4 Answers 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

Check out slideToggle

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.

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 plete.
  });

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