jQuery样式与动画

一、修改内联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()方法的回调函数中应用时,是按顺序发生的(排队效果)。

时间: 2024-08-08 09:34:27

jQuery样式与动画的相关文章

jquery简介之改变样式和动画效果

改变样式 css(name|pro|[,val|fn]) 返回值:String 访问匹配元素的样式属性. 参数 name   String     要访问的属性名称 properties  Map  要设置为样式属性的名/值对 name,value          String, Number      属性名,属性值 name,function(index, value)String,Function  1:属性名  2:此函数返回要设置的属性值.接受两个参数,index为元素在对象集合中的

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

前端编程提高之旅(十六)————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

CSS3+Jquery实现带动画效果的下拉选择框

CSS3+JQuery实现带动画效果的下拉选择框. 元素结构为: 1 <div class="box"> 2 <p>this is the first li</p> 3 <div id="blank"></div> 4 <ul> 5 <li class="selected">this is the first li</li> 6 <li >

八款强大的jQuery图片滑块动画插件

jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微修改就可以使用.本文精选了8款比较强大的jQuery图片滑块动画插件, 希望对读者有所帮助. 1.jQuery可自动播放动画的焦点图插件 这是一款基于jQuery的可自动播放动画的焦点图插件,各种元素悬浮在图片上,并且可以随意组合播放动画,非常适合一些产品的展示和宣传. 在线演示源码下

第五章 jQuery中的动画

http://www.cnblogs.com/shuibing/p/4080543.html 通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show()方法和hide()方法设置参数能有动画效果.例如 show(600);来设置时长600毫秒,同时改变元素的高度,宽度和不透明度. <!DOCTYPE html PUBLIC "-//W3C//DTD

【总结整理】JQuery基础学习---动画

jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数

CSS3/jQuery创意盒子动画菜单

作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 在线演示源码下载 原文链接:http://www.html5tricks.com/css3-jquery-box-menu.html CSS3/jQuery创意盒子动画菜单,布布扣,bubuko.com