- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › jQuery Bouncing Hidden Footer
I just came up with this footer idea where the top of the background image/navigation should stay fixed just above the bottom of the page. When you hover over this the rest of the footer, which is hidden, will slide up. When you mouse out, it will fall again and bounce ever so slightly at the bottom.
Trouble is, I’m having trouble getting it to actually work.
Here’s the HTML:
body
div class=”container”
p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p
img src=”beer.jpeg”
div id=”sliding-footer”
ul
li Events li
li Beer li
li Contact li
li Social li
ul
p And the rest of the footer…p
div !– end container —
body
And the CSS:
body {
margin: 0 50px;
background: url(‘backing.jpg’) repeat scroll bottom left !important;
line-height: 1;
}
.container {
margin: 25px auto;
width: 1000px;
}
.container img {
margin: 25px 50px;
}
#sliding-footer {
position: fixed;
bottom: -330px;
height: 400px;
margin-left: auto;
margin-right: auto;
width: 1000px;
background-image:url(‘bg-slider.png’);
}
#sliding-footer ul {
margin: 30px 0 0 70px;
float: left;
width: 100%;
list-style-type:none;
z-index: 9999;
}
#sliding-footer ul li {
float: left;
margin: 15px 20px;
padding: 0;
display:inline;
}
And the jQUERY: Which I put in the head.
$(document).ready(function () {
$(‘#sliding-footer’).bind(‘mouseenter’, function () {
$(this).stop().animate({bottom: 0}, 750, ‘easeInExpo’);
}).bind(‘mouseleave’, function () {
$(this).stop().animate({bottom: ‘-330px’}, 750, ‘easeOutBounce’);
});
});
Thanks for your help! I’m very grateful.
Not unlike this: http://jsfiddle.net/Xbak7/314/
But I want a whole div with background image to do it.