The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Bouncing Hidden Footer

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #39813

    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:


    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”
    li Events li
    li Beer li
    li Contact li
    li Social li

    p And the rest of the footer…p

    div !– end container —


    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;

    #sliding-footer ul {
    margin: 30px 0 0 70px;
    float: left;
    width: 100%;
    z-index: 9999;

    #sliding-footer ul li {
    float: left;
    margin: 15px 20px;
    padding: 0;

    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:

    But I want a whole div with background image to do it.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.