How do I animate footer on mouseover?

JavaScript
1

I have a page with a header and footer that are in fixed positions. The footer also is partially hidden using a negative number with bottom property.

I would like the footer to move up to its full height using .animate.

This is the CSS I am currently using



#footer {
	position: fixed;
	width: 100%;
	height: 113px;
	bottom: -56px;
	background: rgba(75, 85, 87, 1.00);
	display: block;
}

#footer:hover {
	bottom: 0;
}

and here is the JQuery code I am using


$(document).ready(function(){
	$("#footer").hover(function(){
		$("div").animate({bottom:'0'}, 500);
	});
});

The CSS works. On mouseover the footer div moves up and fully displays, but I would like the animation to happen a little slower and not just jump into place.

I put the javascript together after reading several articles on WC3 Schools website about JQuery .animate function. I am not even sure the code or syntax is correct. Any help would be appreciated. Also feel free just to point me in the right direction.

Thank you.

2

Hi,

This is a script I had lying around (from another thread in the JS forum).
If you mouse over the div at the bottom of the page it will expand after two seconds.
The neat thing about this script is that if you mouse over the footer for less than two seconds, then move your mouse back out, the animation will be cancelled.

Hopefully this will point you in the right direction:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Expanding div example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <style>
         body {margin: 0;}
         #pageFooter {width: 100%; background-color: #666; position: fixed; bottom: 0;   z-index:100;}
         #pageFooterContent {width: 1100px; margin: 40px auto 0;   background-color: #FFF;}
    </style>
  </head>

  <body>
    <footer id="pageFooter">
      <div id="pageFooterContent"></div>
    </footer>

    <script>
         var mnuTimeout = null;
         $('#pageFooter').mouseenter(function(){
            clearTimeout(mnuTimeout);
            mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '250'}, 1000); },2000);
         });

         $('#pageFooter').mouseleave(function(){
            clearTimeout(mnuTimeout);
            mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '0'}, 1000); },2000);
         });
    </script>
  </body>
</html>
3

Thank you. I’ll play around with this.

4

Removed the CSS :hover style and added this javascript, but it still moves way too fast.


$('#footer').hover(function() {
	$(this).animate({bottom: '0'}, 2000);
}, function() {
	$(this).animate({bottom: '-56'}, 2000);
});

Anyone know how to slow the animation down?

5

Yes – maybe…
My solution doe not use JS but CSS3 transitions…

It may not be suitable to all browsers but thought you may be interested

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>xxxxx</title>
<style>
.boxMe{border: 2px red dashed;}
.box {
    width: 50%;
    height: 3em;
    -webkit-transition: width 2s ease, height 2s ease;
    -moz-transition: width 2s ease, height 2s ease;
    -o-transition: width 2s ease, height 2s ease;
    -ms-transition: width 2s ease, height 2s ease;
    transition: width 2s ease, height 2s ease;
    overflow:hidden;
    margin:0.1em auto;
}
.box:hover {height: 20em;}
</style>
</head>
<body>
<div id="foot" class="box">
    <h3>hover here to see</h3>
    <div class="boxMe">
       <p>CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration rather than happening instantaneously as is the normal behaviour....</p>
	   <h3>Now remove and wait a little..</h3>
    </div>
</div>
</body>
</html>
6

Thanks for your suggestion.

7

The complete syntax is: .animate( properties [, duration ] [, easing ] [, complete ] )
The duration is measured in milliseconds, so change the 2000 to something higher and that will make the animation slower.
See here: http://api.jquery.com/animate/