jquery methods(chapter 4)

.css()

• .css('property','value')
• .css({property1: 'value1', 'property-2': 'value2'})

引用

Numeric values do not take quotation marks while string values do.
But, when using the map notation, quotation marks are not required for
property names if they are written in camel-cased DOM notation.

.hide() .show() .animate
Basic .hide() and .show(), without any parameters, can be thought of as smart shorthand methods for .css('display','string'), where string is the
appropriate display value. The effect, as might be expected, is that the matched set of elements will be immediately hidden or shown, with no animation. The .hide() method sets the inline style attribute of the matched set of elements to display:none. The smart part here is that it remembers the value of the display property—typically block or inline—before it was changed to none. Conversely, the .show() method restores the matched set of elements to whatever visible display property they had before display:none was applied.
antimate()
However, jQuery also provides a powerful animate() method that allows us to create our own custom animations with multiple effects. The animate method takes four arguments:
    1. A map of style properties and values—similar to the .css() map discussed
        earlier in this chapter
    2. An optional speed—which can be one of the preset strings or a number
        of milliseconds
    3. An optional easing type—an advanced option discussed in Chapter 10
    4. An optional callback function—which will be discussed later in this chapter
All together, the three arguments would look like this:
 

  .animate({param1: 'value1', param2: 'value2'}, speed, function() {
       alert('The animation is finished.');
    });

Remember that .show('slow') simultaneously modifies the width, height, andopacity. In fact, this method is really just a shortcut for the .animate() method, with a specific set of built-in style properties.

.show('slow');
. animate({height: 'show', width: 'show',
                           opacity: 'show'}, 'slow');