jQuery样式与动画

Posted 2020-07-14 爆炒小黄鸡

一、修改内联CSS

1）.css()方法

为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，然后同样得到一个字符串形式的属性值。要取得多个样式属性的值，可以传入属性名的数组，得到的则是属性和值构成的对象。对于backgroundColor这样由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法，也可以解释驼峰大小写形式的DOM表示法。

取得单个属性的值：  .css(‘property‘)

取得多个属性的值：  .css([‘property1‘,‘property2‘])

设置属性：

传入一个单独的样式和值：  .css(‘property‘,‘value‘);

传入一个由属性-值对构成的对象：    .css({property1:‘value1‘,‘property2‘:‘value2‘,})

在jQuery中，可以直接使用标准的属性名，如果样式对象中不存在这个属性，jQuery就会依次检测所有带前缀（webkit,o, moz, ms）的属性，然后用第一个找到的那个属性。

 

二、动画

1) .show()   .hide()   .toggle()

可以传入动画时长：‘slow‘  ‘fast‘   数字（600）

 

2）fadeIn()  fadeOut()   fadeTo()

 

3) slideDown()   slideUp()   slideToggle()

 

4) .text()

$(‘a‘).text(‘read more‘)  //设置文字

 

三、创建自定义动画

1) .animate()方法

有两种形式：

1.接收4个参数：  一个包含样式属性及值得对象     可选的时长参数    可选的缓动类型    可选的回调函数

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

 

2.接收2个参数：  一个属性对象    一个选项对象

.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,
})

 

 

.outerWidth()计算宽度，包括内边距及边框宽度

height:‘+=20px‘  ‘+=’在原来的基础上变化20像素

 

四、并发与排队效果

1. 处理一组元素

当为同一组元素应用多重效果时，可以通过连缀这些效果轻易地实现排队

$(‘button‘)
.fadeTo(‘fast‘,0.5)
.animate({left:‘10px‘},‘slow‘)
.fadeTo(‘slow‘,1.0)
.slideUp(‘slow‘)
.slideDown(‘slow‘)

 

1) 越过队列

上面的动画是一个一个执行的，如果有些动画我想要一起执行，可以简单地把它们组合到一个.animate()方法中，但如果想要组合的两个动画的duration不一样，那么就得用第二种形式的动画了

$(‘button‘)
.fadeTo(‘fast‘,0.5)
.animate(
　　{left:‘10px‘},
　　{
　　　　duration:‘slow‘,
　　　　queue:false   //把该选项设置为false即可让当前动画与前一个动画同时开始
　　}
)
.fadeTo(‘slow‘,1.0)
.slideUp(‘slow‘)
.slideDown(‘slow‘)

 

 

2）手工队列

为一组元素应用排队效果的最后一个需要注意的问题就是排队不能自动应用到其他的非效果方法，如.css()

假设上面的程序，我想要在slideDown前将背景色修改为红色，如果直接在

.slideUp(‘slow‘)

.css({backgroundColor:‘red‘})

.slideDown(‘slow‘)

背景色会立即改变，不会等到其他动画执行完了再执行。

把非效果方法添加到队列中的一种方式，就是使用.queue()方法。

$(‘button‘)
.fadeTo(‘fast‘,0.5)
.animate(
　　{left:‘10px‘},
　　{
　　　　duration:‘slow‘,
　　　　queue:false  
　　}
)
.fadeTo(‘slow‘,1.0)
.slideUp(‘slow‘)
.queue(function(next){  //传递一个回调函数
　　$(‘button‘).css({backgroundColor:‘red‘});
　　next();  //添加的这个next()方法可以让队列在中断的地方再接续起来，如果不使用next()，动画就会中断
})
.slideDown(‘slow‘)

 

 

3）回调函数

$(‘button‘)
.fadeTo(‘fast‘,0.5)
.animate(
　　{left:‘10px‘},
　　{
　　　　duration:‘slow‘,
　　　　queue:false   
　　}
)
.fadeTo(‘slow‘,1.0)
.slideUp(‘slow‘，function(){
　　$(‘p‘).eq(2).css({backgorundColor:‘red‘});   //用回调函数，不需要用next()
})
.slideDown(‘slow‘)

 

2.处理多组元素

$(‘button‘).click(function(){
　　$(‘p‘).eq(2).slideUp().next().slideDown();   //.next()表示下一个同辈元素
})

 

此时，两个段落的动画是同时执行的

如果想要一个他们按顺序执行，需要用排队回调函数

$(‘button‘).click(function(){
　　$(‘p‘).eq(2).slideUp(‘slow‘,function(){
　　　　$(this).next().slideDown();     
　　})
})

 

 

五、概括

1）一组元素上的效果

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

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

2）多组元素上的效果

默认情况下是同时发生的；

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