jQuery animation queue, create DOM element and its properties, ajaxStart and ajaxStop events

animation queue

By default, animations are queued, but you can disable this by setting the queue property to false. Unqueued animations start immediately and subsequent queued animations are not deferred for unqueued animations.

                 {queue:false, duration:1000})
  • The fadeIn() and fadeOut() effects are queued, but the call to animate() (which animates the width property for 1000ms) is not queued.
  • The width animation begins at the same time the fadeIn() effect begins. The fadeOut() effect begins as soon as the fadeIn() effect ends—it does not wait for the width animation to complete.


ajaxStart and ajaxStop events

  • When jQuery is not performing any Ajax requests and a new request is initiated, it fires an “ajaxStart” event.
  • If other requests begin before this first one ends, those new requests do not cause a new “ajaxStart” event.
  • The “ajaxStop” event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.
  • These “ajaxStart” and “ajaxStop” event handlers can be bound to any document element: jQuery triggers them globally rather than on any one particular element.


DOM Element creating

You probably already know that you can pass a tagname to $() to create an element of that type, and that you can pass (as a second argument) an object of attributes to be set on the newly created element.

  • This second argument can be any object that you would pass to the attr() method,
  • but in addition, if any of the properties have the same name as the event registration methods, the property value is taken as a handler function and is registered as a handler for the named event type.
  • Similarly, if any of the properties has the name “css”, “val”, “html”, “text”, “data”, “width”, “height”, or “offset”, then the value of that property is passed to the method with the same name as the property.
var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");},
                  css: { border: "dotted red 3px" }

Sum up from: http://answers.oreilly.com/topic/2353-5-things-you-might-not-know-about-jquery/