SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    0 Post(s)
    0 Thread(s)

    Jquery: Animated Navigation (from book Novice to Ninja) is not working


    I'm learning jquery from book Novice to Ninja and the Animated Navigation (site 64) is not working with jquery-1.5.1.min.js (it's workin fine with the old one - jquery-1.4.min.js but since there is new jquery avaliable i really don't want to use the old one).

    Here is the code...

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src=""></script>
    <style type="text/css">
    #head {
    	padding-left: 20px;
    #navigation {	
      margin: 0 0 10px 0;
      padding: 0;
    	list-style-type: none;  
    	position: relative;
    	z-index: 1;
    	/* overwrite base */
    #navigation ul {
      margin: 0;
      padding: 0;
    #navigation li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    #navigation a {
    	color: #015287;
    	display: inline-block;
    	padding: 5px;
    	text-decoration: none;
    #navigation_blob {
      top: 0;
    	background-color: #c0ffee;
    	position: absolute;
    	z-index: -1;
    p#intro {
      clear: both;
      margin-top: 10px;
    <script type="text/javascript">
      $('<div id="navigation_blob"></div>').css({
    		width: $('#navigation li:first a').width() + 10,
    		height: $('#navigation li:first a').height() + 10
      $('#navigation a').hover(function(){ 
        // Mouse over function
          {width: $(this).width() + 10, left: $(this).position().left},
    	    {duration: 'slow', easing: 'easeOutElastic', queue: false}
      }, function() { 
    	  // Mouse out function
    	  var leftPosition = $('#navigation li:first a').position().left;
    			{duration:'slow', easing: 'easeOutCirc', queue:false}
    		).animate({left: leftPosition}, 'fast' );
          <div id="navigation">
              <li><a href="#">Home</a></li>
              <li><a href="#">Buy Now!</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Gift Ideas</a></li>

    Any suggestion what do i have to cange in jquery code to be compatible with jquery-1.5.1.min.js?

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    0 Post(s)
    0 Thread(s)
    Just for info. I have checked where is the problem with FireBug - when the mouse is over the link with jquery-1.5.1.min.js "<div id="navigation_blob"...." has property display:none (which of course hide the hover effect) with jquery-1.4.min.js it is correct display:block.

    Any suggestion what should i change?

    Thank you in advance for the answers...


Posting Permissions

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