jQuery基础：样式与动画

2019-02-12 12:07:12

一、修改内联 CSS

对于CSS样式的操作jQuery提供了.css()方法，这个方法集getter（获取方法）和setter（设置方法）于一身。
为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，然后同样得到一个字符串形式的属性值。要取得多个样式属性的值，可以传入属性名的数组，得到的则是属性和值构成的对象。
对于backgroundColor这样由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color ），也可以解释驼峰大小写形式（camel-cased ）的DOM 表示法（如backgroundColor）。

//取得单个属性的值
.css('property')
//返回"value"

//取得多个属性的值
.css(['property1', 'property-2'])
//返回{"property1": "value1", "property-2": "value2"}

在设置样式属性时， .css()方法能够接受的参数有两种，一种是为它传递一个单独的样式
属性和值，另一种是为它传递一个由属性—值对构成的对象：

//单个属性及其值
.css('property', 'value')
//属性:值对构成的对象
.css({
property1: 'value1',
'property-2': 'value2'
})

这些键值的集合叫对象字面量，是在代码中直接创建的JavaScript对象。

注意：一般来说，数字值不需要加引号而字符串值需要加引号。由于属性名是字符串，所以属性通常是需要加引号的。但是，如果对象字面量中的属性名是有效的JavaScript标识符，比如使用驼峰大小写形式的DOM表示法时，则可以省略引号。

二、隐藏和显示元素

基本的.hide()和.show()方法不带任何参数。可以把它们想象成类似.css('display',
'string')方法的简写方式，其中string是适当的显示值。不错，这两个方法的作用就是立即隐藏或显示匹配的元素集合，不带任何动画效果。
其中，.hide()方法会将匹配的元素集合的内联style属性设置为display:none。但它的聪明之处是，它能够在把display的值变成none之前，记住原先的display值，通常是block、inline或inline-block。
相反地，.show()方法会将匹配的元素集合的display属性，恢复为应用display: none之前的可见属性。

.show()和.hide()的这种特性，使得它们非常适合隐藏那些默认的display属性在样式表中被修改的元素。
例如，在默认情况下， <li>元素具有display:list-item属性。但是，为了构建水平的导航菜单，它们可能会被修改成display:inline。而在类似这样的<li>元素上面使用.show()方法，不会简单地把它重置为默认的display:list-item，因为那样会把<li>元素放到单独的一行中；相反， .show()方法会把它恢复为先前的display:inline状态，从而维持水平的菜单设计。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('p').eq(1).hide();
            $('a.more').click(function (event) {
                event.preventDefault();
                $('p').eq(1).show();
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <div class="speech">
        <p>
            The defects and faults of the mind are like wounds in the body. After all imaginable care has been taken to heal them up, still there will be a scar left behind.
        </p>
        <p>
            思想上的缺陷和弱点正如身体上的创伤，就算用尽一切办法将其治愈，仍然会留下疤痕。
        </p>
        <a href="#" class="more">read more</a>
    </div>
</body>
</html>

三、效果和时长

当在.show()或.hide()中指定时长（或更准确地说，一个速度）参数时，就会产生动画效果，即效果会在一个特定的时间段内发生。

(1)指定显示速度
对于jQuery提供的任何效果，都可以指定两种预设的速度参数： 'slow'和'fast'。使用.show('slow')会在600毫秒（0.6秒）内完成效果，而.show('fast')则是200毫秒（0.2秒）。
如果传入的是其他字符串， jQuery就会在默认的400毫秒内完成效果。要指定更精确的速度，可以使用毫秒数值，例如.show(850)。
注意，与字符串表示的速度参数名称不同，数值不需要使用引号。

(2)其他效果
淡入和淡出
jQuery也提供了两个更为精细的内置动画方法: .fadeIn() 和 .fadeOut().

滑上和滑下
使用jQuery的.slideDown()和.slideUp()方法就可以实现。

(3)切换可见性

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            var $firstPara = $('p').eq(2);
            $firstPara.hide();
            $('a.more').click(function (event) {
                event.preventDefault();
                if ($firstPara.is(':hidden')) {
                    $firstPara.fadeIn('slow');
                    $(this).text('read less');
                } else {
                    $firstPara.fadeOut('slow');
                    $(this).text('read more');
                }
            });
        });
    </script>
</head>
<body>
    <div class="speech">
        <p>
            The defects and faults of the mind are like wounds in the body. After all imaginable care has been taken to heal them up, still there will be a scar left behind.
        </p>
        <p>
            翻译：思想上的缺陷和弱点正如身体上的创伤，就算用尽一切办法将其治愈，仍然会留下疤痕。
        </p>
        <p>小编的话：这句话出自法国著名作家弗朗索瓦·德·拉罗什富科，也在美剧《犯罪心理》中出现过。人们都说时间会治愈一切，包括心理的创伤。所有的伤疤都可以因为时间的流逝而抚平。但我不这么认为，心理和思想上的问题，就像是钉在墙上的钉子，钉子在墙上留下的孔可不是轻而易举就能忽略的。</p>
        <a href="#" class="more">read more</a>
    </div>
</body>
</html>

四、创建自定义动画

除了预置的效果方法外，jQuery还提供了一个强大的.animate()方法，用于创建控制更加精细的自定义动画。.animate()方法有两种形式，第一种形式接收以下4个参数。

一个包含样式属性及值的对象：与本章前面讨论的.css()方法中的参数类似。
可选的时长参数：既可以是预置的字符串，也可以是毫秒数值。
可选的缓动（easing）类型
可选的回调函数。

.animate({property1: 'value1', property2: 'value2'},
		duration, easing, function() {
		alert('The animation is finished.');
	}
);

或者

.animate({properties}, {options})