jQuery Novice To Ninja - Animated navigation

JavaScript
1

A few months ago there was another thread about the Animated navigation in the jQuery, Novice To Ninja book ( http://www.sitepoint.com/forums/showthread.php?t=689655&highlight=animated+navigation ). It starts at page 64 and ends at page 67.

I struggled a lot with this, and I found out now that it doesn’t work with the newer versions of jQuery. jQuery version 1.4.2 still works, but from version 1.4.3 and higher it doesn’t work any more.

It also doesn’t solve the problem when putting the newer file into the same folder as the other js-files.

When I embed the 1.4.3-plugin in the exercise file from the book, it also doesn’t work any more.

Is something changed in the newer jQuery-versions, and is there a workaround for this? Maybe it’s possible to put a solution in the ‘corrections and typos’-section of this book?

Thanks for your help :wink:

2

I just tried it with jQuery version 1.5 and it works fine. Have you checked your file paths?

PS: Hi robdewinter, welcome to SitePoint! :slight_smile:

3

Hi, jQuery 1.5 doesn’t work with me, neither in the exercise file. I tried the googleapi link, and tried to place it in the folder. I checked the file paths and they are okey, connections are fine, when I replace an older file than 1.4.2 it doesn’t work. Have you used the first animated navigation (with the #navigation_blob)? Thanks for your welcome by the way :wink:

4

I have only just started the book, so jumped ahead to test that file. Which file is the navigation_blob in? Let me know and I’ll test it out.

5

The file is in the lesson 3 folder, 09_animated_navigation (the first one).

6

Huh, interesting. Yes, the 09 menu doesn’t seem to work right with JQ 1.5, though the dropdown in folder 10 does. Hmm, that’s a worry. :confused:

7

Thanks for trying. It also doesn’t work when making the exercise (even with the corrected code on page 66 –> the ; after left;} is a mistake).

8

The problem seems to be that animating a hidden element causes that element to show in 1.4, but in 1.5 it doesn’t.

Where with 1.4.0, 1.4.1, 1.4.2, 1.4.3, 1.4.4 and 1.5.0 does the problem occur?

1.4.0, 1.4.1 and 1.4.2 work fine.
From 1.4.3 onwards is where things stop working.

9

One solution is to remove all of the parts that hide/show the blob, and then add a final piece to set the blob’s width once you leave it.


$('<div id="navigation_blob"></div>').css({
    width: $('#navigation li:first a').width() + 10,
    height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation')[s][COLOR="Red"].hide()[/COLOR][/s];

$('#navigation a').hover(function(){ 
    // Mouse over function
    $('#navigation_blob').animate(
        {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
}, function() { 
    // Mouse out function
    [color="green"]var leftWidth = $('#navigation li:first a').width();[/color]
    var leftPosition = $('#navigation li:first a').position().left;
    $('#navigation_blob').animate(
        {[s][color="red"]width :'hide'[/color][/s]},
        {duration:'slow', easing: 'easeOutCirc', queue:false}
    ).animate({[color="green"]width: leftWidth + 10, [/color]left: leftPosition}, 'fast' );
});

That way you’re left with code that works.



$('<div id="navigation_blob"></div>').css({
    width: $('#navigation li:first a').width() + 10,
    height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');

$('#navigation a').hover(function(){ 
    // Mouse over function
    $('#navigation_blob').animate(
        {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
}, function() { 
    // Mouse out function
    var leftWidth = $('#navigation li:first a').width();
    var leftPosition = $('#navigation li:first a').position().left;
    $('#navigation_blob').animate(
        {},
        {duration:'slow', easing: 'easeOutCirc', queue:false}
    ).animate({width: leftWidth + 10, left: leftPosition}, 'fast' );
});

You can then later on work out how to implement a hiding mechanism, if the need for it is strong enough.

10

I just got up to this part of the book, and noticed that the code in the download files is different from the code in the actual book. So I replaced the code in script.js with the code in the book and it works perfectly even with jQuery version 1.5.1. The authors obviously just forgot to update the download files.

Here’s the code from the book:


$(document).ready(function(){
  $('<div id="navigation-blob"></div>').css({
		width: $('#navigation li:first a').width() + 10,
		height: $('#navigation li:first a').height() + 10
	}).appendTo('#navigation');

  $('#navigation a').hover(function(){ 
    // Mouse over function
	  $('#navigation-blob').animate(
      {width: $(this).width() + 10, left: $(this).position().left},
	    {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
  }, function () {
  $('#navigation-blob')
  .stop(true)
  .animate(
  {width: 'hide'},
  {duration: 'slow', easing: 'easeOutCirc', queue: false}
  )
  .animate(
  {left: $('#navigation li:first a').position().left},
  'fast'
  );

EDIT:
Sorry guys, forget this. The code doesn’t work. It only appeared to work because I had a typo (I had navigation_blob instead of navigation-blob in the last section of code). So the hover only worked partially. :frowning:

11

It seems like all you have to do is call show() before calling animate() on hover for the first hover function:

$('#navigation a').hover(function(){ 
    // Mouse over function
	  $('#navigation_blob').[COLOR="Red"]show().[/COLOR]animate(
      {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;
	  $('#navigation_blob').animate(
      {width:'hide'},
			{duration:'slow', easing: 'easeOutCirc', queue:false}
		).animate({left: leftPosition}, 'fast' );
  });
12

Have you tried this with jQuery 5 though? I doesn’t seem to work with that.

13

The code was relying on calls to animate() to “show” the div - apparently this wasn’t the behavior they intended so they changed it and this broke code which relied on that behavior (which seemed like a side effect anyway.) If you just explicity call show() before you call animate, the code will work as intended (tried it on 1.5.1 and it works as expected.)

14

Hm, do you mind posting the full script you are using then? Nothing happens for me with JQ5 with the code you posted, but perhaps I don’t use it correctly. Pasted it in where it seemed to belong.

15

Can you please link is to this JQ5 that you are using? It’s one that I don’t think I have come across before.

16

Here’s the code with the show() call added (in orange):

$(document).ready(function(){
  $('<div id="navigation_blob"></div>').css({
		width: $('#navigation li:first a').width() + 10,
		height: $('#navigation li:first a').height() + 10
	}).appendTo('#navigation').hide();

  $('#navigation a').hover(function(){ 
    // Mouse over function
	  $('#navigation_blob').[COLOR="Orange"]show()[/COLOR].animate(
      {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;
	  $('#navigation_blob').animate(
      {width:'hide'},
			{duration:'slow', easing: 'easeOutCirc', queue:false}
		).animate({left: leftPosition}, 'fast' );
  });
});
17

Ah heck, cancel that. I made a file path typo, and the changes do work with jquery 1.5. It’s a little bit flaky, but at least the behavior is essentially as intended. Well done kinakuta.james.

Paul, sorry for the confusion. By “JQ5” I just meant the latest version (1.5.2) from the jQuery site: jQuery: The Write Less, Do More, JavaScript Library. I should have said “JQ 1.5”. Duh. :blush:

18

Phew. It’s good to know we’re on track.

19

So that the code isn’t “flaky” add show to mouseout also.

You can see the code here

jsFiddle - animated menu

20

Nice work roigron. Thanks for putting that code together like that. :slight_smile: