自CSS3以来,主流网站开始偏向于扁平风格和动画效果,这时就可以jQuery的动画就可以发挥其长处了,灵活的应用其动画API,让我们可以设计出很多绚丽的效果。下面,让我们来列举一些jQuery常用的动画API。

  

1、show()和hide()方法

 //从display:none还原元素默认或已设置的display属性
$("selector").show() ; //设置元素的display样式为none,等于$("selector").css("display","none")
$("selector").hide() ;

(注:传入参数后,.show()和.hide()方法同时动画改变元素的width,height和透明属性;传入参数控制显隐速度,单位毫秒,如.show(600),也可传入fast,normal,slow,fast为200毫秒,normal为400毫秒,slow为600毫秒.)

2、fadeIn()方法和fadeOut()方法

用法同show()、hide(),也可以在里面传参数。

3、slideUp()方法和slideDown()方法

用法同show()、hide(),也可以在里面传参数。

4、自定义动画方法animate()

 用法1:

 //语法:
$("selector").animate(params,speed,callback);
params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...}
speed:速度参数,可选
callback:在动画完成时执行的参数(即回调函数),可选

 常见的动画例子:

 <script>
//自定义动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000); //selector在3秒内向右移动500px
});
})
</script>
 <script>
//累加、累减动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"+=500px"},3000); //连续触发click事件时,在当前位置累加500px
});
})
</script>
<script>
//多重动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向运动,同时增加高度
});
})
</script>
<script>
//按顺序执行多个动画的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //动画队列
});
})
</script>

5、动画回调函数

  因css()方法不会加入动画队列中,则会马上执行。如若要在动画最后改变selector的css,需要利用回调函数 . 例:

 <script>
$("selector").click(function(){
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){
$(this).css("property3","value3"); //css()方法利用回调函数加入动画队列
});
})
</script>

(注:动画回调函数适用于jQuery所有的动画效果方法)

6 、停止动画和判断是否处于动画状态 
  结束当前动画,如队列中存在下一个动画则立即执行下一个动画,格式$("selector").stop([clearQueue][,gotoEnd]) .

 <script>
$("selector").hover(function(){
$(this).stop().animate();
},function(){
$(this).stop().animate();
})
</script>

  clearQueue参数设置为true时,将清空当前元素接下来尚未执行完的动画队列 .  例:

 <script>
$("selector").hover(function(){
$(this).stop(true).animate().animate() //如此时触发光标移出事件,直接跳过后面的动画队列,避免执行本队列第二个动画
},function(){
$(this).stop(true).animate().animate()
})
</script>

  gotoEnd参数设置为true时,可将正在执行的动画直接到达结束时刻的状态 is(":animated") . 判断元素是否处于动画状态,可用于防止动画累积 .例:

 <script>
if(!$("selector").is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画,则添加新动画
}
</script>

7 、其他动画方法

  3个专门用于交互的动画方法:toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback]) .

 //切换元素的可见状态,如元素隐藏则切换为可见,反之亦然
$("selector").toggle()
//通过高度变化来切换元素的可见性
$("selector").slideToggle()
//把元素的不透明度以渐进方式调整到指定的值,如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度
$("selector").fadeTo()

8、 动画方法概括

toggle()用来代替hide()和show() .

slideToggle()用来代替slideUp()和slideDown() .

animate()可代替所有动画方法 .

到此完结,看完最后一句有没有觉得前面的都白看的,哈哈。其实,各有各的好处,别让animate()太累了!

  

jQuery中的动画——《锋利的JQuery》的更多相关文章

  1. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  2. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  3. jQuery学习笔记(四)jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  4. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. jQuery笔记(四)jQuery中的动画

    jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

  7. 4.2 《锋利的jQuery》jQuery中的动画

    问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...

  8. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  9. JQuery中的动画

    一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...

随机推荐

  1. JavaScript中的原型模式

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.使用原型对象的好处是可以让所有对象实例共享它 ...

  2. mysql相关的软件

    数据库采用mysql,那么问题来了,mysql的部署是采用主备模式?主主模式?集群模式?在然后采取分库.分表模式? 其次:在外围的辅助开源软件的选择mycat?mybatis?keepalived?r ...

  3. 用Hadoop,还是不用Hadoop?

    本文由 伯乐在线 - Lex Lian 翻译.英文出处:Anand Krishnaswamy.欢迎加入翻译小组. Hadoop通常被认定是能够帮助你解决所有问题的唯一方案. 当人们提到“大数据”或是“ ...

  4. 把display 属性改为block样式变化问题

    可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...

  5. 开启HTML5之旅。。。

    学习大纲: 一.了解HTML 1.什么是HTML? HTML是用来描述网页的一种语言 HTML是一种超文本标记语言 Hyper Text Markap Language HTML不是一种编程语言,是一 ...

  6. 服务端 安装配置 svn

    检查是否安装svn svn --version 看看,既能确定是否安装,又能确定版本多少 安装 svn yum -y install subversion 创建仓库存放目录 mkdir -p /opt ...

  7. 扩增子分析QIIME2. 1简介和安装

    原网站:https://blog.csdn.net/woodcorpse/article/details/75103929 声明:本文为QIIME2官方帮助文档的中文版,由中科院遗传发育所刘永鑫博士翻 ...

  8. Python之逻辑运算符

    这一小节我在动笔之前犹豫到底要不要动手写,虽然简单但是防止遗忘,博主还是决定记录一下.Python中运算符主要分为算术运算符,赋值运算符,比较运算符,逻辑运算符以及成员运算符.下面详细记录这5种运算符 ...

  9. C++_类继承5-抽象基类

    abstract base class,ABC 抽象基类 有时候is-a规则并不像看上去那么简单,例如圆和椭圆的关系.圆是椭圆的特殊情况.椭圆可以派生出圆.但是椭圆的数据成员及方法对于圆来说是信息冗余 ...

  10. Fliptile (dfs+二进制压缩)

    Farmer John knows that an intellectually satisfied cow is a happy cow who will give more milk. He ha ...