jQuery基础教程（第四版）读书笔记“事件，样式与动画“-原创手记-慕课网

$(document).ready(function() {
  var $speech = $('div.speech');
    var defaultSize = $speech.css('fontSize');
　$('#switcher button').click(function() {
　　var num = parseFloat($speech.css('fontSize'));
　　switch (this.id) {
　　　case 'switcher-large':
　　　　num *= 1.4;
　　　　break;
　　　case 'switcher-small':
　　　　num /= 1.4;
　　　　break;
　　　　default:
　　　num = parseFloat(defaultSize);
　　　}
　　$speech.css('fontSize', num + 'px');
　});
});

$(document).ready(function() {
  var $speech = $('div.speech');
    var defaultSize = $speech.css('fontSize');
　$('#switcher button').click(function() {
　　var num = parseFloat($speech.css('fontSize'));
　　switch (this.id) {
　　　case 'switcher-large':
　　　　num *= 1.4;
　　　　break;
　　　case 'switcher-small':
　　　　num /= 1.4;
　　　　break;
　　　default:
　　　　num = parseFloat(defaultSize);
　　}
　　$speech.css('fontSize', num + 'px');
　});
});

jQuery就会依次检测所有带前缀（Webkit、O、Moz、ms）的属性，然后使用第一个找到的那个属性。
.hide()方法会将匹配的元素集合的内联style属性设置为display:none
.show()方法会将匹配的元素集合的display属性，恢复为应用display: none之前的可见属性。

当用户单击第一段末尾read more链接时，就会隐藏该链接同时显示第二个段落

$(document).ready(function() {
　$('p').eq(1).hide();
　$('a.more').click(function(event) {
　　event.preventDefault();
　　$('p').eq(1).show();
　　$(this).hide();
　});
});

注意，这里使用了.preventDefault()来避免链接的默认操作.
指定显示速度

$('a.more').click(function(event) {
　event.preventDefault();
　$('p').eq(1).show('slow');
　$(this).hide();
});

'slow'和'fast'：.show('slow')会在600毫秒（0.6秒）内完成效果而.show('fast')则是200毫秒（0.2秒）
.show(850)

淡入和淡出.fadeIn( ) .fadeOut( )

$('a.more').click(function(event) {
　event.preventDefault();
　$('p').eq(1).fadeIn('slow');
　$(this).hide();
});

使用jQuery的.slideDown()和.slideUp() 这两个动画方法仅改变元素的高度。要让段落以垂直滑入的效果出现.

$(document).ready(function() {
　$('p').eq(1).hide();
　$('a.more').click(function(event) {
　　event.preventDefault();
　　$('p').eq(1).slideDown('slow');
　　$(this).hide();
　});
});

jQuery提供了一个.toggle()方法，该方法的作用类似于.show()和.hide()方法，而且与它们一样的是，.toggle()方法时长参数也是可选的。另一个复合方法是.slideToggle()，该方法通过逐渐增加或减少元素高度来显示或隐藏元素

$('a.more').click(function(event) {
　event.preventDefault();
　$firstPara.slideToggle('slow');
　var $link = $(this);
　if ($link.text() == 'read more') {
　　$link.text('read less');
　} else {
　　$link.text('read more');
　}
});

创建自定义动画.animate( )
.animate()方法有两种形式，第一种形式接收以下4个参数。
 一个包含样式属性及值的对象：与本章前面讨论的.css()方法中的参数类似。
 可选的时长参数：既可以是预置的字符串，也可以是毫秒数值。
 可选的缓动（easing）类型：现在我们先不介绍，这是第11章中将要讨论的一个高级选项。
 可选的回调函数：将在本章后面讨论。

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

第二种形式接受两个参数，一个属性对象和一个选项对象：.animate({properties}, {options})

.animate({
　property1: 'value1',
　property2: 'value2'
}, {
　duration: 'value',
　easing: 'value',
　specialEasing: {
　　property1: 'easing1',
　　property2: 'easing2'
　},
　complete: function() {
　　alert('The animation is finished.');
　},
　queue: true,
　step: callback
});

例：
$(document).ready(function() {
　var $speech = $('div.speech');
　var defaultSize = $speech.css('fontSize');
　$('#switcher button').click(function() {
　　var num = parseFloat($speech.css('fontSize'));
　　switch (this.id) {
　　　case 'switcher-large':
　　　　num *= 1.4;
　　　　break;
　　　case 'switcher-small':
　　　　num /= 1.4;
　　　　break;
　　　default:
　　　　num = parseFloat(defaultSize);
　　}
　　$speech.animate({fontSize: num + 'px'}, 'slow');
　});
});

用jQuery的.outWidth()方法来计算宽度，包括内边距及边框宽度。

$(document).ready(function() {
　$('div.label').click(function() {
　　var paraWidth = $('div.speech p').outerWidth();
　　var $switcher = $(this).parent();
　　var switcherWidth = $switcher.outerWidth();
　　$switcher.animate({
　　　borderWidth: '5px',
　　　left: paraWidth - switcherWidth,
　　　height: '+=20px'
　　}, 'slow');
　});
});

在有了CSS的定位支持之后，单击Text Size，最终完成效果

$(document).ready(function() {
　$('div.label').click(function() {
　　var paraWidth = $('div.speech p').outerWidth();
　　var $switcher = $(this).parent();
　　var switcherWidth = $switcher.outerWidth();
　　$switcher.css({
　　　position: 'relative'
　　}).animate({
　　　borderWidth: '5px',
　　　left: paraWidth - switcherWidth,
　　　height: '+=20px'
　　}, 'slow');
　});
});

并发与排队效果
并发与排队效果：即让效果一个接一个地发生。

$('div.label').click(function() {
　var paraWidth = $('div.speech p').outerWidth();
　var $switcher = $(this).parent();
　var switcherWidth = $switcher.outerWidth();
　$switcher
　　.css({position: 'relative'})
　　.animate({left: paraWidth - switcherWidth}, 'slow')
　　.animate({height: '+=20px'}, 'slow')
　　.animate({borderWidth: '5px'}, 'slow');
});

通过使用连缀，可以对其他任何jQuery效果进行排队，而并不限于.animate()方法

$('div.label').click(function() {
　var paraWidth = $('div.speech p').outerWidth();
　var $switcher = $(this).parent();
　var switcherWidth = $switcher.outerWidth();
　$switcher
　　.css({position: 'relative'})
　　.fadeTo('fast', 0.5)
　　.animate({left: paraWidth - switcherWidth}, 'slow')
　　.fadeTo('slow', 1.0)
　　.slideUp('slow')
　　.slideDown('slow');
});

1.越过队列

$switcher
　.css({position: 'relative'})
　.fadeTo('fast', 0.5)
　.animate({
　　left: paraWidth - switcherWidth
　}, {
　　duration: 'slow',
　　queue: false
　})
　.fadeTo('slow', 1.0)
　.slideUp('slow')
　.slideDown('slow');

第二个参数（即选项对象）包含了queue选项，把该选项设置为false即可让当前动画与前一个动画同时开始。

2.手工队列

$switcher
　.css({position: 'relative'})
　.fadeTo('fast', 0.5)
　.animate({
　　left: paraWidth - switcherWidth
　}, {
　　duration: 'slow',
　　queue: false
　})
　.fadeTo('slow', 1.0)
　.slideUp('slow')
　.queue(function(next) {
　　$switcher.css({backgroundColor: '#f00'});
　　next();
　})
　.slideDown('slow');

像这样传递一个回调函数，.queue()方法就可以把该函数添加到相应元素的效果队列中。在这个函数内部，我们把背景颜色设置为红色，然后又调用了next()方法，其返回的结果将作为参数传给回调函数。添加的这个next ()方法可以让队列在中断的地方再接续起来，然后再与后续的.slideDown ('slow')连缀在一起。如果在此不使用next()方法，动画就会中断。

处理多组元素

$(document).ready(function() {
　$('p').eq(2)
　　.css('border', '1px solid #333')
　　.click(function() {
　　　$(this).slideUp('slow').next().slideDown('slow');
　　});
　$('p').eq(3).css('backgroundColor', '#ccc').hide();
});

原来可见的第三个段落，正处于向上滑到一半的状态；与此同时，原来隐藏的第四个段落，正处于向下滑到一半的状态。

排队回调函数
回调函数就是作为方法的参数传递的一个普通函数。

$switcher
　.css({position: 'relative'})
　.fadeTo('fast', 0.5)
　.animate({
　　left: paraWidth - switcherWidth
　}, {
　　duration: 'slow',
　　queue: false
　})
　.fadeTo('slow', 1.0)
　.slideUp('slow', function() {
　　$switcher.css({backgroundColor: '#f00'});
　})
　.slideDown('slow');

同前面一样，<div id="switcher">的背景颜色在它滑上之后滑下之前，变成了红色。注意，在使用交互的完成回调函数而不是.queue()时，不必在回调中调用next()。

简单概括
(1) 一组元素上的效果：
 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为false。
(2) 多组元素上的效果：
 默认情况下是同时发生的；
 当在另一个效果方法或者在.queue()方法的回调函数中应用时，是按顺序发生的（排队效果）。