[jQuery] Effect like Kwicks plugin

[jQuery] Effect like Kwicks plugin

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Trebuchet MS";
panose-1:2 11 6 3 2 2 2 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:29575311;
mso-list-type:hybrid;
mso-list-template-ids:-1290738876 67698705 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-text:"%1\)";
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'>I’m looking to achieve an effect
similar to that of the <a
href="http://www.jeremymartin.name/projects.php?project=kwicks">Kwicks plugin</a>.
However, I don’t want to use this for navigation, I want to use it for
the main body of my site. Currently it looks like the Kwicks plugin can only
work on list items, but I’d like something which can be applied to div
tags. <a href="http://www.jeremymartin.name/examples/kwicks.php?example=7">One
of the examples</a> shows the use of divs inside the list item tags, but I don’t
think that’s valid xHTML so I’d rather not use that method.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'>Does anyone know if there’s a similar
plugin that can be applied to div tags, or does anyone have plain code they
might share which can do this? I’ve already got something that “works”
but doesn’t look all that good:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><a
href="http://commadelimited.com/code/maternitymealplanner/">http://commadelimited.com/code/maternitymealplanner/</a><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'>The problems I’m having with my
version are:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal style='margin-left:.5in;text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'><span
style='mso-list:Ignore'>1)<font size=1 face="Times New Roman"><span
style='font:7.0pt "Times New Roman"'>      </span></font></span></span></font><![endif]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'>Far
right div gets pushed to bottom as animation plays out<o:p></o:p></span></font>
<p class=MsoNormal style='margin-left:.5in;text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'><span
style='mso-list:Ignore'>2)<font size=1 face="Times New Roman"><span
style='font:7.0pt "Times New Roman"'>      </span></font></span></span></font><![endif]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'>Animation
is a little jerky as the various elements position themselves </span></font><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'><o:p></o:p></span></font>
<p class=MsoNormal style='margin-left:.5in;text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'><span
style='mso-list:Ignore'>3)<font size=1 face="Times New Roman"><span
style='font:7.0pt "Times New Roman"'>      </span></font></span></span></font><![endif]><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'>Occasionally,
the cursor will position itself just right and the animation will queue up and
then go on for like an extra 5 seconds after the mouse is moved off of it.</span></font><font
size=2 face="Trebuchet MS"><span style='font-size:10.0pt;font-family:"Trebuchet MS"'><o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'>Thanks peeps<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Trebuchet MS"><span style='font-size:
10.0pt;font-family:"Trebuchet MS"'>Andy Matthews<o:p></o:p></span></font>
</div>
</body>
</html>