jQuery Simple Animate

[unemployment]

My syntax is pretty terrrible with jQuery.  I'm very new to it. 

 

Can someone please tell me where I went wrong?

 

         $('#nav_list').mouseout(function() {
	$('#nav_highlight').stop().animate({
		var value = $(this).parent().get(0).id.substring(3)
		left: $(value)
	  }, 300, function() {
		// Animation complete.
	  });
});

[AyKay47]

var value = $(this).parent().get(0).id.substring(3)

 

my money would put your error in this line.. depending on your DOM, this might not being doing what you expect it to be doing..also, I 've heard of some known errors when using the id method.. can you please post the relevant DOM code that goes along with your js code.

[unemployment]

I fixed it.  I for some reason just couldn't define the variable in the animate function.

[nogray]

You can't define a variable inside an object

//            <----------------------------------------------------------------------------------------
$('#nav_highlight').stop().animate({                          //                                                |
    var value = $(this).parent().get(0).id.substring(3)  // move this line ouside the object --	
    left: $(value)

[unemployment]

Good to know, but how do I know what an object is when I encounter one? 

[trq]

Your passing an object to the animate method. An object is everything between (and including) the {} braces.

 

Javascript is a bit different to PHP in that you can create objects (and functions) on the fly. To better illustrate this, take a look at this.

 

var myObj = {
  left: $(this).parent().get(0).id.substring(3)
}

var myMouseOutFuntion = function() {
  $('#nav_highlight').stop().animate(myObj, 300);
}

$('#nav_list').mouseout(myMouseOutFunction);

 

Note that I have created a myObj object which is passed to the animate() method. I have also created a myMouseOutFunction() function which is passed to the mouseout() method.

 

I'm not saying this is how it should be done. This is just a more verbose example to try and make it a little easier to see what is actually going on.

[haku]

I fixed it.  I for some reason just couldn't define the variable in the animate function.

 

With some jQuery functions, you pass in an 'anonymous' function (this means a function that is defined right there and then with no name, rather than giving it a name somewhere else and calling it). For example, the click function:

$("#something").click(function()
{

});

You can see that inside .click(), you are passing it function(){}. This function(){} is an anonymous function. Because it is a function, you can assign variables etc, the same as in any function.

 

But with animate, as others have mentioned, you are passing an object. This means that animate looks like this:

$("#something").animate({});

You can see that inside .animate(), you are passing it {}. {} is an object. Objects don't have variables or logic inside, they just have properties that can be assigned. For example {name : "haku"}.

 

You were most likely facing your problem because of a confusion between functions() and objects {}. Hopefully this clears things up for you a bit.

[unemployment]

That does clear things up a bit from a logic perspective.  Good to know that objects have properties.