再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中animate用法实例分析
Mar 09 Javascript
javascript实现在线客服效果
Jul 15 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Vue计算属性的使用
Aug 04 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Use Word to Search for Files
2007/06/15 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
对javascript继承的理解
2016/10/11 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python实现飞船大战
2020/04/24 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
计算机毕业生求职信
2014/06/10 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
承诺书范本大全
2015/05/04 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript