再JavaScript的jQuery库中编写动画效果的指南


Posted in Javascript onAugust 13, 2015

jquery中常用的动画的方法就是hide()与show().

$(element).hide()这段代码可以与这相等element.css("display","none")

 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现。可以修改元素的多个样式,高度,宽度,不透明度。

另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会。

                $("#panel h5.head").toggle(function(){                    $(this).addClass("highlight");                    $(this).next().fadeOut(1000);                },function(){                    $(this).removeClass("highlight");                    $(this).next("div .content").fadeIn(1000);                });还有一组是slideUp,slideDown改变高度。

动画方法概括

再JavaScript的jQuery库中编写动画效果的指南

动画队列

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

a)当在一个animate()方法中应用多个属性时,动画是同时发生的。

b)当以链式的写法应用动画方法时,动画是按照顺序发生的。

(2)多组元素上的动画效果

a)默认情况下,动画都是同时发生的。

b)当以回调的形式应用动画方式时,动画是按照回调顺序发生的。

另外,在动画方法中,要注意其他非动画的方法会插队,例如css()方法,要使这些非动画的方法也按照顺序来执行,需要把这些方法写在动画方法的回调函数中。

举一个animate的例子:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

若想要动画停止,需要在animate()方法前插入stop()方法

例如:$(“#id”).stop().animate()注意stop中的两个参数。

判断元素是否在动画状态的方法时:

$(element).is(“:animated”);

jQuery 可以很方便的为页面中的元素添加一些动态效果,可以用其内建效果,也可以自己定义效果。

下面是一些内建的效果方法:

  • $.fn.show 显示所选择的元素
  • $.fn.hide 隐藏所选择的元素
  • $.fn.fadeIn 淡入
  • $.fn.fadeOut 淡出
  • $.fn.slideDown 通过垂直滑动的效果来显示元素
  • $.fn.slideUp 通过垂直华东的效果来隐藏元素
  • $.fn.slideToggle 显示滑动或隐藏滑动交互执行

一个简单的例子:

$('h1').show();

设置动画效果的时长

对于 $.fn.show 和 $.fn.hide 而言,默认情况下其时长是 0,其它效果的默认时长一般是 400 毫秒,当然也自己设置时长:

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery 默认的速度常量都位于 jQuery.fx.speeds 对象中:

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

我们也可以扩展这个对象,添加自己常用的速度值:

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

回调函数

如果想在动画效果结束后再执行一些代码,那么可以给这些动画方法换入一个回调函数:

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

如果选择器中没有匹配到任何元素,那么回调函数也不会被执行,所以在执行回调函数前做个判断是有必要的:

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

自定义动画方法

jQuery 中的 $.fn.animate 方法可以用来扩展我们的自定义动画,主要是通过 animate 方法设置元素 CSS 属性来实现的,设置元素 CSS 属性的时候可以使用绝对值,也可以使用相对值:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

但是,用 $.fn.animate 创建自定义动画效果时,不能改变元素的颜色。如果要创建颜色动画,需要依赖其它一些颜色插件。
动画的风格

jQuery 内建的动画风格有两种:swing 和 linear

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

控制动画

jQuery 提供了几个方法用来控制动画的执行:

$.fn.stop 停止当前正在执行的动画

$.fn.delay 使动画暂停一段时间:

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off :关闭动画的过度效果,相当于把时长设为 0。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
javascript动画算法实例分析
Jul 31 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
layui实现三级联动效果
Jul 26 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 #Javascript
JavaScript生成SQL查询表单的方法
Aug 13 #Javascript
对于jQuery性能的一些优化建议
Aug 13 #Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 #Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 #Javascript
理解和运用JavaScript的闭包机制
Aug 13 #Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 #Javascript
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
理解javascript对象继承
2016/04/17 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
react路由配置方式详解
2017/08/07 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
PyQt5实现拖放功能
2018/04/25 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python 通过exifread读取照片信息
2020/12/24 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
综合测评自我鉴定
2013/10/08 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
项目投资意向书
2014/04/01 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
比较几种Redis集群方案
2021/06/21 Redis