Greetings! Welcome to my live page.
Currently, I am facing an issue with the sliding animation on the header. Specifically, the small gray slide-up divs at the bottom of the sliding pictures are not behaving as expected. They are meant to slide up on mouseover and then return to their original position once the mouse moves away, which they do on slow movements.
The animation code is as follows:
sub_div.animate({top:"-=20"},500);})
And the reset code is:
$('.sub').hide();
$('.sub').css('top','190px' );
Despite resetting their position at the start of the code, when I quickly move the mouse on and off the pictures, the title divs continue to appear. I attempted to use:
sub_div.stop(true).animate({top:"-=20"},500);})
However, this approach did not resolve the issue.
In the HTML, the divs with the "pics" class represent the sliding divs, while the divs with the "sub" class are the small title divs at the bottom.
<div id="wrapper">
<div class="pics" id="pic1"><div class="sub">cccc</div></div>
<div class="pics" id="pic2"><div class="sub">mmm</div></div>
<div class="pics" id="pic3"><div class="sub">mmmm</div></div>
<div class="pics" id="pic4"><div class="sub">mmm</div></div>
<br class="clearfloat"/>
</div>
Here is the jQuery function:
<script language="javascript">
$(function(){
$('.pics').mouseover(function(){
/* Resetting all the sub divs at the bottom to default */
$('.sub').hide();
$('.sub').css('top','190px' );
/* Resizing all divs to 86px except the one being mouseovered */
$('.pics').not(this).stop(true).animate({width:"86"},500 )
/* Setting the div being mouseovered to 400px */
$(this).animate({width:"400"},500 , function(){
/* Sliding up the little title div at the bottom */
var sub_div = $(this).find('.sub');
sub_div.show();
sub_div.animate({top:"-=20"},500);})
})
})
</script>
Another issue I am facing is that the small title divs appear outside their parent div. I want them to be visible only within their parent div's area. I tried setting the parent div's overflow to hidden, but it seems this doesn't work with absolute positioning.
Below is my CSS:
/* Slides parent div */
.container .header .top_pics {
background-color: #F5D80A;
position: relative;
padding-bottom: 30px;
padding-left: 20px;
float: left;
width: 680px;
}
/* Sliding pictures (divs) */
.container .header .top_pics .pics {
width: 86px;
float: left;
height: 200px;
overflow: hidden;
}
/* Small slide-up titles */
.header .top_pics .sub {
background-color: #CCC;
position: absolute;
width: 395px;
top: 200px;
opacity: 0.5;
display: none;
padding-left: 5px;
padding-top: 9px;
padding-bottom: 9px;
}
/* Individual sliding pics */
.header #pic1 {
width: 400px;
background-image: url(images/h1.jpg);
background-repeat: no-repeat;
}
.header #pic2 {
background-color: #0C9;
}
.header #pic3 {
background-color: #C30;
}
.header #pic4 {
background-color: #CCC;
}