jQuery基础教程——样式与动画

来源：互联网发布：陕西大数据咨询公司编辑：程序博客网时间：2024/06/14 18:53

一、使用.css()方法修改内联CSS

1、jQuery既可以解释字符版的CSS表示法（如background-color），也可以解释驼峰大小写形式（camel-cased）的DOM表示法（如backgroundColor）。

2、.css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递一个有属性-值对构成的映射。

//单个属性及其值

.css('property','value')

//属性-值对构成的映射

.css({ property1:'value1',

'property2':'value2'

}）

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

以下是一个通过按钮逐渐增大文字字体大小的效果。

<!DOCTYPE html><html><head><!-- jquery mix NIE (最新版本）--><script charset="gb2312" src="http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js"></script><body><div id="switcher" style="width:200px;">    <div class="label">Text Size</div>    <button id="switcher-default">Default</button>    <button id="switcher-large">Bigger</button>    <button id="switcher-small">Smaller</button></div><div class="speech">    <p>Fourscore and seven years ago our fathers brought forth on this continer a new nation,conceived in liberty,and dedicated to the proposition that all men are created equal.</p><p style="border:1px solid red;">Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>    <a href="#" class="more">read more</a>    <p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p>    <p>It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p></div></body></html>

以下是jQuery代码清单：

<script type="text/javascript">$(document).ready(function(){var $speech = $('div.speech');var defaultSize = $speech.css('fontSize');$('#switcher button').click(function() {var num=parseFloat($speech.css('fontSize'));//获取当前字体的大小。通过parseFloat()函数只取得字体大小属性中的数值部分。parseFloat()函数会在一个字符串中从左到右地查找一个浮点（十进制）数。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');});});</script>

二、基本的隐藏和显示。

1、基本的隐藏和显示就是不带参数的.hide()和.show()。它的好处就是有记忆功能。可以记住元素最初的display属性。（inline或者block）。

2、有效果和速度的就是参数的.hide()和.show()。.show('speed')方法会同时从上到下增大元素高度，从左到右增大元素宽度，从0到1增加元素的不透明度。参数有三个预设值slow0.6秒、normal0.4秒、fast0.2秒或者是毫秒数值.show(850);

3、淡入和淡出的效果就是.fadeIn()和.fadeOut()。

4、滑上和滑下的效果就是.slideDown()和.slideUp()。

5、实现复合效果可以使用.toggle()方法。包括显示和隐藏，还有.slideToggle();方法。

以下附上javascript代码：

$(document).ready(function(){var $firstPara=$('p').eq(1);//这里的.eq()方法返回jQuery对象,其中包含一个元素（索引从0开始）。$firstPara.hide();$('a.more').click(function(){if($firstPara.is(':hidden')){$firstPara.slideDown('slow');$(this).text('read less');//使用.text()方法修改元素中的文本。}else{$firstPara.slideUp('slow');$(this).text('read more');}return false;//避免链接的默认操作。});});

或者实现复合效果可以使用.toggle()方法。

$(document).ready(function(){var $firstPara=$('p').eq(1);//这里的.eq()方法返回jQuery对象,其中包含一个元素（索引从0开始）。$firstPara.hide();$('a.more').click(function(){$firstPara.slideToggle('slow');        var $link=$(this);if($link.text()=='read more'){$link.text('read less');//使用.text()方法修改元素中的文本。}else{$link.text('read more');}return false;//避免链接的默认操作。});});

三、用.animate()方法创建自定义动画。

1、第一种形式有4个参数

a、一个包含样式属性及值的映射

b、可选的速度参数。

c、可选的缓动。

d、可选的回调函数。

.animate({property1:'value1',property2:'value2'},speed,easing,function(){

alert('The animation is finished.');

});

2、第二种形式接受两个参数。

.animate({properies},{options})

PS:第二种是把第一种形式的第2~4个参数封装在了另一个映射中，同时添加了两个选项。

查询：http://www.w3school.com.cn/jquery/effect_animate.asp

下面使用第一种形式手工创建效果。(也可以使用其他CSS属性，如：left、top、fontsize、margin、padding和borderWidth。)

$(document).ready(function(){$firstPara=$('p').eq(1);//这里的.eq()方法返回jQuery对象,其中包含一个元素（索引从0开始）。$firstPara.hide();$('a.more').click(function(){$firstPara.animate({height:'toggle',opacity:'toggle'},'slow');        var $link=$(this);if($link.text()=='read more'){$link.text('read less');//使用.text()方法修改元素中的文本。}else{$link.text('read more');}return false;//避免链接的默认操作。});});

或者这样的效果：让该项从页面左侧移动到右侧的同时，高度增加20像素并使其边框宽度增加到5像素。

$(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');});});

四、关于并发与排队效果。

1、处理一组元素，分别将效果代码放在.animate()方法中连缀起来即可。

$(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({left:paraWidth -switcherWidth},'slow').animate({height:'+=20px')},'slow').animate({borderWidth:'5px'},'slow');});});

2、处理一组元素，效果代码连缀起来，但是其中两个动画同时进行。下面是全部顺序播放与两个连缀在一起的代码。

$('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');
}); $('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
}, {
duration: 'slow',
queue: false
})
.fadeTo('slow', 1.0)
.slideUp('slow')
.slideDown('slow');
});
PS：第二个参数（即选项映射）包含了queue选项，把该选项设置为false即可让当前动画与前一个动画同时开始。

手工安排队列：排队不能自动应用到其他的非效果方法，如.css()方法。把非效果方法添加到队列中的一种方式，就是使用.queue()方法。添加的.next()方法可以让队列在中断的地方在接续起来。如下代码所示：

$('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}, {duration: 'slow',queue: false}).fadeTo('slow', 1.0).slideUp('slow').queue(function(next) {$switcher.css({backgroundColor: '#f00'});next();}).slideDown('slow');});

2、处理多组元素

a、多组元素的动画同时发生：

$(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(); });

b、为了对不同元素上的效果实现排队，jQuery为每个效果方法都提供了回调函数。同我们在事件处理程序和.queue()方法中看到的一样，回调函数就是作为方法的参数传递的一个普通函数。在效果方法中，它们是方法的最后一个参数。

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

但是，我们需要注意的是，必选搞清楚要滑上的到底是哪个段落。因为回调函数位于.slideDown()方法中，所以$(this)得环境已经发生了改变。现在，$(this)已经不再是指向.click()的第三个段落了——由于.slideDown()方法是通过$(this).next()调用的，所以该方法中的一切现在都将$(this)视为下一个同辈元素，即第四个段落。因而，如果在回调函数中放入$(this).slideUp('slow')，那么我们最终还会把刚刚显示出来的段落给隐藏起来。

解决方法就是：将$(this)先保存在一个变量中。比如：var $ clickItem = $(this)。

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

简单概括：

(1)、一组元素上的效果。

A、当在一个.animate()方法中以多个属性的方式用时，是同时发生的。

B、当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为false。

（2）、多组元素上的效果。

A、默认情况下是同时发生的。

B、当在另一个效果方法或者在.queue()方法的回调函数中应用时，是按顺序发生的（排队效果）。