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.
Inline CSS Modification
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() method for such occasions.
This method acts as both a getter and a setter. To get the value of a style property, we simply pass the name of the property as a string, like .css('backgroundColor'). Multi-word properties can be interpreted by jQuery when hyphenated, as they are in CSS notation (background-color), or camel-cased, as they are in DOM notation (backgroundColor). For setting style properties, the .css() method comes in two flavors-one that takes a single style property and its value and one that takes a map of property-value pairs:
| .css('property','value') .css({property1: 'value1', 'property-2': 'value2'}) |
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.
We use the .css() method the same way as using .addClass() -by chaining it to a selector and binding it to an event. To demonstrate this, we'll use the style switcher example.