I am trying to replicate the text overlay effect that occurs when you mouse over an image - found on the Guardian web site.
I have it working except when my mouse goes over the trail-text area that area bounces (slideDown slideUp) repeatedly a number of times.
I think it is because the trail-text area becomes the focus and causes the mouseout event.
Anyway any suggestions/tips would be really helpful. Many thanks, Ben...
mypage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>TEST</title>
<style type="text/css">
.pixie {
width: 870px;
padding: 0;
margin: 0;
}
.strap {
padding: 0;
margin: 0;
}
div.caption{
padding-left: 10px;
/*background-color: #a5a5a5;*/
background-color: #e03d32;
color: white;
}
.caption h3 {
color: white;
}
.pixie a,
.pixie div,
.pixie a:hover {
display: block;
position: relative;
text-decoration: none;
}
.pixie div.trail-text {
color: #333;
background-color: transparent;
background-image: url(../images/grey-bg.png);
background-repeat: repeat;
}
.pixie div.trail-text {
display: none;
margin-top: 0;
position: absolute;
overflow: hidden;
text-align: left;
padding-top: 2em;
padding-bottom: 0;
z-index: 10;
height: 4.25em;
width: 870px;
}
</style>
<script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='javascripts/main.js' type='text/javascript'></script>
</head>
<body>
<div class='pixie'>
<div class='caption'>
<h3>Some Big Heading</h3>
<p class='strap'>Some strapline of stuff</p>
</div>
<div class='trail-text'>
The <strong>Overlay text</strong> which should appear and then disappear.
</div>
<img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
</div>
</body>
</html>
main.js
$(document).ready(function(){
$("div.trail-text").attr("style", "display: none;");
if ($(".pixie,div.trail-text")) {
var pixies = $(".pixie,div.trail-text");
$(pixies).mouseover(function() {
$(this).find("div.trail-text").slideDown("fast")
}).mouseout(function() {
$(this).find("div.trail-text").slideUp("fast")
});
};
});