$("ul:not(animated)", this).slideDown("fast");

Hi orange sky,

1) $("ul:not(:animated)", in this statement below?

$("ul:not(animated)", this).slideDown("fast");

This code is pretty basic on the end so I'll start there, the slideDown function simply animates an elements height from 0 to x which is the original height of the element itself, the start of this code is slightly more confusing as we're only asking jQuery to execute the slideDown method on elements that aren't currently animating which jQuery is tracking internally.

2) Are ":not()" and ":animated()" pseudo-classes

No, :not is an special expression selector since it behaves in two ways, they are:

1. First jQuery attempts to find anything that isn't valid in CSS since :not is also a valid CSS selector, if it finds an selector such as :animated it will execute :not as a jQuery expression and not the CSS selector.

2. If jQuery doesn't find anything within the expression at all special it then passes the value onto Sizzle which is the CSS selector engine built into jQuery.

The :animated selector is as described already a special jQuery expression selector, within jQuery all animations get tracked thus allowing this special selector to see if an element(s) is currently animating and returns a boolean result to the :not selector in this case.

$("ul", this).slideUp("fast");

3) In the above code, does "this" refer only to the "ul" I am either hovering on.

One thing not many new comers to jQuery know about is the ability to give selectors explicit context without cluttering up the string selector you pass as the first argument, this is what's happening in the above code. In the above example this refers to an parent element which when executed jQuery will automatically assign to the overall selector which ensures you're only targeting ul elements in the context and not everything on the page.

4) Normally when using jQuery, we need a link to the jquery librairie, but when should we include a link to the jquery UI (not sure how to phrase this, but I have seen this kind of link before)

jQuery UI is a UI framework, in general you don't need to use it unless you have a specific requirement for components such as a calendar, modal window, custom drop downs etc. I personally try and stay clear of it because of how much code and assets are required to get it working so I tend to stick with libraries that have little dependency on images and bulky CSS and if I can swing it jQuery all-together.

Hope that helps.

Hello Chris,

You are right, starting from the end of the expression is a lot easier, but for some reason, I am having some trouble understanding :not and the 2 ways you mention.

1) Can you please dummify the :not and the 2 ways, I really would like to understand it.

2) Also, you said :animated returns a bolean value; I guess I should start by asking, what would be considered as animation by JQuery. For me slideUp, slideDown, toggle... are animations, but I suppose Jquery doesnt see it that way.

3) if :animated returns boolean values, if animated return 'false' inside ' :not(:animated),' does this previous expression evaluate to true?

4)Are you saying that :not() and :animated() are just selectors and not psedo-classes. I guess I should ask what the difference between pseudo class and type selector is. I thought all pseudo classes use ":" in front of the method like :hover(), :first-class()

5) Does $("ul", this) mean target only this 'ul' and not the others?

Thanks for the clear explanation on JQuery UI.

Thanks always!