5

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?

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

4 Answers 4

3

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

5
  • Hi, yes this works. :) Is it possible to make it not completely hidden as in the example? I mean to leave just enough of it visible so that one can click on the tip to make the rest slide into view. Then i'll absolute position a small div on the tip that is targeted by the click function to make it slide.
    – Jeddizero
    Jan 4, 2011 at 4:06
  • afik .hide() will hide it completely. I'm trying making the outer div overflow:hidden and then making the div that slides have position:absolute with bottom:-200px;. That makes it begin with only a bit showing but when i click, the jquery makes it completely disappear.
    – Jeddizero
    Jan 4, 2011 at 4:51
  • use another div with same image using CSS just how much width you want to show and on hover hide that div and slidedown the another div where u have full image. Comment if not clear
    – Praneeth
    Jan 4, 2011 at 4:54
  • @Albinos: I think animate would be simplest way of doing it
    – Praneeth
    Jan 4, 2011 at 6:55
  • any chance you could give an example of using animate()?
    – Jeddizero
    Jan 4, 2011 at 8:24
3

Check out slideToggle

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.

1
  • check whether that animate div is hidden or not before animating it check this link api.jquery.com/hidden-selector this logic would go inside your $("#button).click(function() { here... }
    – Praneeth
    Jan 4, 2011 at 17:49
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.