www.webdeveloper.com
Results 1 to 3 of 3

Thread: setTimeOut method

  1. #1
    Join Date
    Nov 2011
    Posts
    6

    setTimeOut method

    Hi,

    Relatively new to javaScript.

    I tried to put a timer on the on the code below so the mouseenter event handler doesn't fire for a couple of seconds. I understand the abstract of the setTimeout method, but I cannot figure out how to incorporate it into this code. And I screw it up every time I try.

    I am trying to animate (increase) the height of the pageFooterContent div on mouseenter, and decrease it on mouseleave. Here is the page on which I would like to do this http://galileedetroit.org/index2.php. Pertinent code is below. Any help would be greatly appreciated.

    HTML Code:
    <!-- BEGIN PAGE FOOTER -->
    <footer id="pageFooter">
    <div id="pageFooterTop"></div>
    <!-- BEGIN PAGE FOOTER CONTENT -->
    <div id="pageFooterContent">
    </div>
    <!-- END PAGE FOOTER CONTENT -->
    </footer>
    <!-- END PAGE FOOTER -->
    Code:
    #pageFooter {
    	width: 100%;
    	background-color: #666;
        position: fixed;
    	bottom: 0;
        /*height: 60px !important;*/
        z-index:100;
    }
    
    #pageFooterContent {
    	width: 1100px;
    	margin: 40px auto 0;
    	background-color: #FFF;
    }
    Code:
    <script>
    var timeoutId;
    $('#pageFooter').mouseenter(function() {
      $('#pageFooterContent').animate({
        height: '250'
      }, 1000, function() {
        // Animation complete.
      }); 
    })
    
    $('#pageFooter').mouseleave(function() {
      $('#pageFooterContent').animate({
        height: '0'
      }, 1000, function() {
        // Animation complete.
      });
    })
    </script>
    Thank you.

  2. #2
    Join Date
    Nov 2011
    Posts
    6
    I found the answer:

    Code:
    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);
    });

  3. #3
    Join Date
    Nov 2011
    Posts
    6

    resolved

    done

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles