再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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
angular分页指令操作
Jan 09 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
Python使用turtule画五角星的方法
2015/07/09 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
思想品德自我鉴定
2013/10/12 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
2015年调度员工作总结
2015/04/30 职场文书
女性健康讲座主持词
2015/07/04 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python