CODEWITHSUNDEEP
javascriptjqueryhtml
Jeddizero
Jeddizero

Reputation: 105

How can I make a DIV slide in and out?

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.com/

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?

Upvotes: 5

Views: 29839

Answers (4)

Albinoswordfish
Albinoswordfish

Reputation: 1957

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.

Upvotes: 1

Jeddizero
Jeddizero

Reputation: 105

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.

Upvotes: 1

Praneeth
Praneeth

Reputation: 2547

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

Upvotes: 3

Vadim
Vadim

Reputation: 17957

Check out slideToggle

Upvotes: 3

Related Questions