Hi all,
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.
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:
// function for show and hide on header feature
$(document).ready(function () {
$("#feature").addClass("hide");
$("#feature .mainImage, #feature .textArea").mouseover(function(){
$("#feature").removeClass("hide");
$("#feature").addClass("show");
});
$("#feature .mainImage").mouseout(function(){
$("#feature").removeClass("show");
$("#feature").addClass("hide");
});
});
--------
If you need to see the CSS, here it is:
/* FEATURE */
#header #feature {width:1200px; position:relative; background:#4A63AE;
top:0; left:0; z-index:2; min-height:165px; height:auto !important;
height:165px;}
#header #feature .textArea {width:441px; position:absolute; top:20px;
left:143px; z-index:10;}
#header #feature .textArea p {margin-bottom:0;}
#header #feature .textArea .readMoreLink {float:right;}
#header #feature .mainImage {position:absolute; right:40px; top:0;
width:420px;}
/* hide and show styles for feature */
#header #feature.hide {position:absolute; top:-60px; center:0;
background:none;}
#header #feature.hide .textArea {display:none;}
#header #feature.show {position:absolute; top:0; center:0;
background:#4A63AE;}
#header #feature.show .textArea * {color:#FFF;}
#header #feature.show .textArea .readMoreLink a
{background:url(/images/iconArrowWhite.gif) 0 4px no-repeat !important;}
#header #feature.show .textArea .readMoreLink a:hover
{text-decoration:underline;}
#header #feature.show .mainImage {float:none; width:1200px;
min-height:165px; height:auto !important; height:165px; position:absolute;
z-index:9;}
#header #feature.show .mainImage img {float:right;}
--------
And the HTML
<div id="feature">
<div class="textArea">
<h2>Quick Case Study</h2>
<p>
Diageo required us to raise their internal profile for a charity event A
pilot project
working with stray and partially owned dogs in Sri Lanka was chosen.
</p>
<p class="readMoreLink"><a href="/">More about Quick Case Study</a></p>
</div>
<p class="mainImage"><img src="/images/headerFeatureImg.png" alt=""/></p>
</div>
----------
Any help would be greatly appreciated.
