▓▓▓▓▓▓ 大致介绍

    通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验

▓▓▓▓▓▓ jQuery中的动画

▓▓▓▓▓▓ show()和hide()方法

    1、show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none";

    2、show()方法和hide()方法会同时改变元素的宽度、高度和透明度

    3、在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住的display属性值来显示该元素

    4、show()方法和hide()方法都能接受一个参数,表示运动的快慢

         $('.div1').toggle(function(){
$('.div2').hide(600);
},function(){
$('.div2').show(600);
});

▓▓▓▓▓▓ fadeIn()方法和fadeOut()方法

    1、fadeOut()方法在指定的一段时间内只降低元素的不透明度,而fadeIn()方法则相反

    2、接受一个参数

        $('.div1').toggle(function(){
$('.div2').fadeIn(600);
},function(){
$('.div2').fadeOut(600);
});

▓▓▓▓▓▓ slideUp()方法和slideDown()方法

    1、slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为"none",当调用slideDown()方法时,这个元素将由上至下延伸,slideUp()方法相反

    2、接受一个参数

        $('.div1').toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();
});

▓▓▓▓▓▓ 自定义动画方法animate()

    语法:animate(params,speed,callback);

    (1)params:一个包含样式属性及值得映射

    (2)speed:速度参数,可选

    (3)callback:在动画完成时执行的函数,可选

    

    1、基本用法

        $('.div1').click(function(){
$('.div2').animate({width:'+=50px',height:'300px'},600);
});

    2、多重动画

    如果要采用链式运动可以采用链式写法

        $('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600);
});

    注意:如果采用链式写法时用了css()方法,css()方法不会添加到运动队列中,会直接执行而不等待前面的动画

        $('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600)
.css('border','10px solid black');
});

    这个元素的边框会在一开始就添加到了元素上,要解决这个问题的办法就是使用回调函数

    如果要同时运动可将要运动的值写在一起

        $('.div1').click(function(){
$('.div2').animate({width:'350px',height:'300px'},600);
});

  

▓▓▓▓▓▓ 回调函数

    回调函数适用与jQuery所有的动画效果方法

    例如要解决链式写法css()属性会直接执行的问题可以采用回调函数的方法

        $('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.animate({height:'300px'},600,function(){
$('.div2').css('border','10px solid black');
});
});

▓▓▓▓▓▓ 停止动画和判断是否处于动画状态

    1、停止元素的动画

    stop()方法接受两个参数

    第一个参数为true或者false,表示是否要清空为执行完的动画队列,例如我们写链式动画时,如果第一个参数为true,当我们阻止了正在进行的一个动画操作后,后面的动画操作都会被清空,如果参数为false时,就只会阻止当前的这个动画,动画队列后的动画依旧执行

    第二个参数为true或者false,表示是否要将正在执行的动画跳转到末状态

    2、判断元素是否处于动画状态

    如果用户频繁的执行一个animate()动画时,就会出现动画积累,解决方法就是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画

        if(!$('div1').is(':animated')){
// 添加动画
}

    3、延迟动画

    如果要延迟执行一个动画,就可以使用delay()方法

        $('.div1').click(function(){
$('.div2').animate({width:'350px'},600)
.delay(1000)
.animate({height:'300px'},600,function(){
$('.div2').css('border','10px solid black');
});
});

▓▓▓▓▓▓ 其他动画方法

    1、slideToggle()方法

    通过高度的变化来切换匹配的元素的可见性

        $('.div1').click(function(){
$('.div2').slideToggle();
});

    2、fadeTo()方法

    可以把元素的不透明度以渐进的方式调整到指定的值,这个动画只调整元素的不透明度

        $('.div1').click(function(){
$('.div2').fadeTo(600,0.5);
});

    3、fadeToggle()方法

    通过不透明度来切换匹配元素的可见性

        $('.div1').click(function(){
$('.div2').fadeToggle(1000);
});

  

jQuery学习之路(4)- 动画的更多相关文章

  1. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习笔记(四):动画

    内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...

  3. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  5. jQuery 学习之路(2):选择器与过滤器

    一.基本选择器 标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器 ...

  6. jQuery 学习之路(1):引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  7. jquery学习笔记-----事件和动画

    一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的read ...

  8. jQuery学习之旅 Item9 动画效果

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...

  9. Jquery学习之路(二) 实现table样式的设定

    上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...

随机推荐

  1. .net资源链接

    http://aspalliance.com/ http://www.hotscripts.com/ http://www.dotnet247.com http://stackoverflow.com ...

  2. Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局

    1.textview 垂直水平居中的设置 Android:gravity="center_vertical|center" 2.LinearLayout中设置控件垂直布局,默认的是 ...

  3. iOS Build Active Architecture Only 属性的理解(及 not found for architecture i386 的解决方案)

    最近做项目过程遇到一个问题: 涉及到这个属性:Build Active Architecture Only Yes .No的区别: 设置为yes,是只编译当前的architecture版本,是为了编译 ...

  4. java JPEGImageEncoder;图像处理

    在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JP ...

  5. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  6. 【leetcode】13. Roman to Integer

    题目描述: Given a roman numeral, convert it to an integer. 解题分析: 这道题只要百度一下转换的规则,然后着这解释写代码即可.实现上并没有什么难度,直 ...

  7. js调试模式控制台输出信息

    js调试模式控制台输出信息.console.log

  8. 转int啥啥啥的

    1.String转int类型的话.需要用Double.valueof("这写String类型的数据").intValue(); 2.保留小数点: float scale = (fl ...

  9. Linux 安装zookeeper

    分享到:   1.下载zokeeper 1.1 官网下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/ 1.2 链接:https:/ ...

  10. docker-compose的使用

    docker-compose的介绍 Compose是一个定义和管理多容器的工具,使用Python语言编写.使用Compose配置文件描述多个容器应用的架构,比如使用什么镜像.数据卷.网络.映射端口等; ...