{"id":1942,"date":"2009-10-04T04:48:54","date_gmt":"2009-10-04T08:48:54","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=1942"},"modified":"2009-10-09T21:08:06","modified_gmt":"2009-10-10T01:08:06","slug":"how-to-add-flair-to-your-actions-with-jquery-part-1-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2009\/how-to-add-flair-to-your-actions-with-jquery-part-1-javascript-tutorial\/","title":{"rendered":"How to Add Flair to your Actions with jQuery – Part 1 – Javascript Tutorial"},"content":{"rendered":"

How to Add Flair to your Actions with jQuery <\/h2>\n
\n

If actions speak louder than words, then in the JavaScript world, effects make actions speak louder still. With jQuery, we can easily add impact to our actions through a set of simple visual effects, and even craft our own, more sophisticated animations <\/b>. <\/p>\n

jQuery effects certainly add flair, as is evident when we see elements gradually slide into view instead of appearing all at once. However, they can also provide important usability enhancements that help orient the user when there is some change on a page (especially common in AJAX applications). In this article by Jonathan Chaffer <\/b> and Karl Swedberg <\/b>, we will explore a number of these effects and combine them in interesting ways. <\/p>\n<\/blockquote>\n

Inline CSS modification <\/h1>\n

Before we jump into the nifty jQuery effects, a quick look at CSS is in order. One way of modifying a document’s appearance is by defining styles for classes in a separate stylesheet and then adding or removing those classes with jQuery. Typically, this is the preferred process for injecting CSS into HTML because it respects the stylesheet’s role in dealing with the presentation of a page. However, there may be times when we need to apply styles that haven’t been, or can’t easily be, defined in a stylesheet. Fortunately, jQuery offers the .css() <\/i> method for such occasions. <\/p>\n

This method acts as both a getter <\/b> and a setter <\/b>. To get the value of a style property, we simply pass the name of the property as a string, like .css(‘backgroundColor’) <\/i>. Multi-word properties can be interpreted by jQuery when hyphenated, as they are in CSS notation ( background-color <\/i>), or camel-cased, as they are in DOM notation ( backgroundColor <\/i>). For setting style properties, the .css() <\/i> method comes in two flavors—one that takes a single style property and its value and one that takes a map <\/b> of property-value pairs: <\/p>\n

.css('property','value') .css({property1: 'value1', 'property-2': 'value2'})  <\/pre>\n
Experienced JavaScript developers will recognize these jQuery maps as JavaScript object literals <\/b>. <\/p>\n
 Numeric values do not take quotation marks while string values do. However, when using the map notation, quotation marks are not required for property names if they are written in camel-cased DOM notation. <\/em> <\/p>\n
We use the .css() <\/i> method the same way as using .addClass() <\/i> —by chaining <\/b> it to a selector and binding <\/b> it to an event. To demonstrate this, we’ll use the style switcher example. <\/p>\n
 
  
Text Size <\/div>