How can I make a div tab?

Question

I am currently studying jQuery. I would like to know how to make the image slide when you click on its edge, then click again and it bounces. Similar to this:

http://www.karenmillen.com/

If you see the right side and click, there is the effect I'm looking for. I guess this will include creating a div and giving it a background image, and then using some jquery to make the div slide. Of course, the div may have other content, such as html. Any ideas?

Will the .slideDown () method work?

Answer 1

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

Answer 2

Check out slideToggle

Answer 3

Here is what I still have:

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

So basically the animated div is starting to hide. There's another div with a background image that is aligned to look like the animated div is still sticking out a bit. Then pressing the button causes the static div to disappear and the animated div to appear in view. However, I'm not sure how to make the tactics perfect so that they are smooth and people don’t know that there are two divs. An animated div takes a fraction of a second to get to where the div with the static image was located, however the static images disappear immediately, leaving a nonsmooth animation.

One more thing, how can I return a static div image at the moment when the animated div moves back after the user clicks? It cannot be at the moment when the user clicks the “cancel” button, otherwise he will definitely appear before he suggested.

Answer 4

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

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

This will shift the div to 500 pixels, which takes 5 seconds.