Slide elements in different diretions with jQuery


	Slide elements in different diretions with jQuery

januariusp

9-27-2009 8:45 PM

231 views

tags:

javasript, jquery, slide effect

januariusp says:

Useful for that funky slide up from nowhere technique.

Add a Comment

Login to Comment. Not a member yet? Sign up

Today's Top Clips

visit the Top Clips page

View the Top Clips from September 27, 2009

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/ffd728f0-26ec-4919-95af-ea79f587c14e/A58CF4CC-30B7-464C-9A97-43D6D589D51E/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions" href="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions" style="font-size: 11px;">www.learningjquery.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><H2><A title="Permanent Link: Slide Elements in Different Directions" rel="bookmark" href="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions" bitly="BITLY_PROCESSED">Slide Elements in Different Directions</A></H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><DIV class="author">by <A href="http://www.englishrules.com" bitly="BITLY_PROCESSED">Karl Swedberg</A></DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><P>Although jQuery has a nice set of slide methods — <CODE>.slideDown()</CODE>, <CODE>.slideUp()</CODE>, and <CODE>.slideToggle()</CODE> — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><H4>Reverse the Slide Direction</H4></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><P>With the built-in slide methods, elements are shown by sliding them down and into view. But what if we want to slide something from the bottom up and into view? The trick here is to use some judicious CSS. Let's start with a simple HTML structure:</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions"><DIV class="syntax_hilite"><SPAN class="langName">HTML:</SPAN><BR /><DIV id="html-1">
<DIV class="html"><OL><li style="margin-left:16px;padding-left: 0px;"><DIV><SPAN><SPAN>&lt;div</SPAN> <SPAN>id</SPAN><SPAN>=</SPAN><SPAN>"slidebottom"</SPAN> <SPAN>class</SPAN><SPAN>=</SPAN><SPAN>"slide"</SPAN><SPAN>&gt;</SPAN></SPAN></DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV>  <SPAN><SPAN>&lt;button&gt;</SPAN></SPAN>slide it<SPAN><SPAN>&lt;/button&gt;</SPAN></SPAN></DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV>  <SPAN><SPAN>&lt;div</SPAN> <SPAN>class</SPAN><SPAN>=</SPAN><SPAN>"inner"</SPAN><SPAN>&gt;</SPAN></SPAN>Slide from bottom<SPAN><SPAN>&lt;/div&gt;</SPAN></SPAN></DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV><SPAN><SPAN>&lt;/div&gt;</SPAN></SPAN></DIV></LI>
</OL></DIV>
</DIV></DIV></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/A58CF4CC-30B7-464C-9A97-43D6D589D51E/blog/" title="blog or email this clip"><img src="http://content8.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Copyright; Privacy; EULA

Search Options

Today's Top Clips