SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I animate footer on mouseover?

    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
    Code:
    #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
    Code:
    $(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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <!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. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I'll play around with this.

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removed the CSS :hover style and added this javascript, but it still moves way too fast.

    Code:
    $('#footer').hover(function() {
    	$(this).animate({bottom: '0'}, 2000);
    }, function() {
    	$(this).animate({bottom: '-56'}, 2000);
    });
    Anyone know how to slow the animation down?

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Location
    au2650
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rsh65 View Post
    Anyone know how to slow the animation down?
    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


    Code:
    <!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. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestion.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by rsh65 View Post
    Anyone know how to slow the animation down?
    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/


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •