[jQuery] Slide up and down effect on absolutely positioned elements
Hi all,<div>
</div><div>I'm having some trouble with the slide up and down effect with JQuery. Basically, I have an element that is absolutely positioned -60px at the top of the page, by applying a CSS class (hide) using JQuery. This shows is slightly poking out at the top of the browser. When you hover over the image in that DIV, the absolute positioning becomes 0, so it pops out over the content of the page.</div>
<div>
</div><div>With a lot of stuffing around, I seem to have that part working, but I can't figure out how to apply a slide affect to it, perhaps because of the absolute positioning? Here is my code:</div><div>
</div><div><div>// function for show and hide on header feature </div><div>$(document).ready(function () {<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature").addClass("hide");<span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature .mainImage, #feature .textArea").mouseover(function(){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature").removeClass("hide");</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature").addClass("show");<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature .mainImage").mouseout(function(){ </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature").removeClass("show");<span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$("#feature").addClass("hide");<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div>
<div>});</div><div>
</div><div>--------</div><div>
</div><div>If you need to see the CSS, here it is:</div><div>
</div><div><div>/* FEATURE */</div><div>#header #feature {width:1200px; position:relative; background:#4A63AE; top:0; left:0; z-index:2; min-height:165px; height:auto !important; height:165px;}</div>
<div>#header #feature .textArea {width:441px; position:absolute; top:20px; left:143px; z-index:10;}</div><div>#header #feature .textArea p {margin-bottom:0;}</div><div>#header #feature .textArea .readMoreLink {float:right;}</div>
<div>#header #feature .mainImage {position:absolute; right:40px; top:0; width:420px;}</div><div>
</div><div>/* hide and show styles for feature */</div><div>#header #feature.hide {position:absolute; top:-60px; center:0; background:none;}</div>
<div>#header #feature.hide .textArea {display:none;}</div><div>#header #feature.show {position:absolute; top:0; center:0; background:#4A63AE;}</div><div>#header #feature.show .textArea * {color:#FFF;}</div><div>#header #feature.show .textArea .readMoreLink a {background:url(/images/iconArrowWhite.gif) 0 4px no-repeat !important;}</div>
<div>#header #feature.show .textArea .readMoreLink a:hover {text-decoration:underline;}</div><div>#header #feature.show .mainImage {float:none; width:1200px; min-height:165px; height:auto !important; height:165px; position:absolute; z-index:9;}</div>
<div>#header #feature.show .mainImage img {float:right;}</div><div>
</div><div>--------</div><div>
</div><div>And the HTML</div><div>
</div><div><div><div id="feature"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div class="textArea"></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><h2>Quick Case Study</h2></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>Diageo required us to raise their internal profile for a charity event A pilot project </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>working with stray and partially owned dogs in Sri Lanka was chosen.</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>
</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><p class="readMoreLink"><a href="/">More about Quick Case Study</a></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><p class="mainImage"><img src="/images/headerFeatureImg.png" alt=""/></div><div></div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div>
</div><div>----------</div><div>
</div><div>Any help would be greatly appreciated.</div></div></div></div>