How to implement a slide-out/drawer effect in JQuery?

views:

505

answers:

How to implement a slide-out/drawer effect in JQuery?

I'm looking for a JQuery plug-in for a drawer-like effect. I found that plug-in which is quite similar to what I want but it slides from one side of the screen (top, bottom, left or right). In my case, I have an image as wide as the content div, and I want it to slide down when clicked to reveal the content, but not from the top of the screen, the image won't be located at the top of the screen. In other words, the effect I want is exactly like what that plug-in does but the only difference is that I don't want it to slide from the top side of the screen, it should slide from wherever the image is on the page.

Any suggestions would be really appreciated...

I think something like that would do it no?

RageZ 2009-11-13 07:07:39

I've already seen that, it was the first result I got when I googled and it's quite different from what I want. No offense but I think you didn't read my question.

Waleed Eissa 2009-11-13 08:09:31

@Waleed: no prob, I don't really know what you want so difficult to answer and it seems I am not the only one since you didn't get any answer so far. You might want to add a link with a real example of the effect you want.

RageZ 2009-11-13 08:11:42

@RageZ, sorry I was in a rush and didn't read the tutorial, I just viewed the demo and the effect was different so I skipped it, but when I checked again I saw that it refers to using the JQuery slideUp() and slideDown UI effects, so I'll check that and see how it works (I'm kind of new to JQuery hence the reason for my question). The effect I want is this: I have an image that should work as a handle, when you click it it slides down revealing the content, you click the image again and it slides back up to to its original position hiding the content. A quite simple slide effect

Waleed Eissa 2009-11-13 08:34:59

@Waleed: no worries, I think the slideUp/Down should be enough to achieve what you are describing, in this tutorial they use that to make an accordion menu but that's the same effect you looking for.

RageZ 2009-11-13 08:58:42

Sometimes *sigh* you have to modify an existing plugin or *gasp!* roll your own JavaScript :)

Chris Tek 2009-11-13 15:11:47

@ChrisTek, I know how to do it in Javascript but with all those plug-ins for JQuery I thought it must've been written already, isn't this why a lot of developers use JQuery? To save time!

Waleed Eissa 2009-11-13 23:09:16

ansaurus

tags:

views:

answers:

How to implement a slide-out/drawer effect in JQuery?

related questions