转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html

jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如backgroundPosition这么好的东西火狐上竟然用不了,于是我就自己写了一个。

 /**
* 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本
* @author Meleong
* v1.00
*/
(function($) {
$.fx.step["backgroundPosition"] = function(fx) {
if (typeof fx.end == 'string') {
fx.start = getBgPos(fx.elem);
//fx.end原本是一个string,这里将它转换成数组,就不会再进入这个if,也方便我们下面的计算
//例 "0px -21px"
fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])];
}
//这里fx.pos是根据传入的时间参数,从0到1变化的浮点数
var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit;
var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit;
fx.elem.style.backgroundPosition = nowPosX + ' ' + nowPosY; /**
* 获取backgroundPosition数组[top, left],没有单位
*/
function getBgPos(elem) {
var top = 0.0;
var left = 0.0;
if ($(elem).css("backgroundPosition")) {
//例 "0px -21px"
top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]);
left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]);
}else{
top = parseFloat($(elem).css("backgroundPositionX"));
left = parseFloat($(elem).css("backgroundPositionY"));
}
return [top, left];
}
}
})(jQuery);

注释写得很详细,相信大家都能看懂。下面是使用方法:

跟jQuery其他的animate的使用方法一致。例如:

 $("#id").stop().animate({backgroundPosition : "0px -21px"}, 1000, function(){
alert("动画执行完毕");
})

这里只写了backgroundPosition,并没有将X和Y单独写出来,有兴趣的同学可以自己写一下,应该是比较简单的。

下面这个范例是一个backgroundPosition的动画,用div也可以做游戏(只是个走路范例,键盘↑↓←→键控制,开头的卡顿是按键机制的问题,不用理他)

点击下载

【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法的更多相关文章

  1. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

  2. JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  3. iphone 浏览器自动解析数字为号码解决方法

    iphone 浏览器自动解析数字为号码解决方法 www.MyException.Cn  网友分享于:2015-10-09  浏览:0次   iphone 浏览器自动解析数字为号码解决办法 在工作中遇到 ...

  4. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  5. 001. 使用ssh连接不上centos 6.5的解决方法及其解决中文乱码

    1. 使用ssh连接不上centos 6.5的解决方法: 错误显示: Connecting to 192.168.1.106:22... Could not connect to '192.168.1 ...

  6. 【转】PLSQL developer 连接不上64位Oracle 的解决方法

    PLSQL developer 连接不上64位Oracle 的解决方法 快乐无极 , 2012/06/13 10:10 , 开发文档 , 评论(6) , 阅读(140430) , Via 本站原创 大 ...

  7. PLSQL developer连接不上64位Oracle的解决方法

    PLSQL developer连接不上64位Oracle的解决方法 64位下装Oracle 11g 64位,PLSQL Developer使用出现问题. 问题描述: 登录对话框中,数据库下拉框为空: ...

  8. Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法

    Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法 在使用struts2的项目中上传文件的时候出现了一个这样的错误: 2011-7 ...

  9. 【转】Windows2008上传大文件的解决方法(iis7解决上传大容量文件)

    2008上传大文件的解决方法:http://wenku.it168.com/d_000091739.shtml 2003上传大文件的解决方法:http://tech.v01.cn/windowsxit ...

随机推荐

  1. js 技巧 (六)JavaScript[对象.属性]集锦

    JavaScript[对象.属性]集锦 SCRIPT 标记 用于包含javascript代码. 语法 属性 LANGUAGE 定义脚本语言 SRC 定义一个URL用以指定以.JS结尾的文件 windo ...

  2. 树莓派 -- bcm2835 library (1)

    bcm2835 library提供了user space 操作IO的代码. 本文不涉及代码分析,先直观的按照user guide完成操作. 1. 在Raspberry中安装bcm2835 librar ...

  3. Django的admin源码浅析和模仿

    admin模块: admin提供了5种接口 list_display, 指定数据展示字段,不能放多对多字段

  4. super在python中有什么用

    所属网站分类: python高级 > 面向对象 作者:阿里妈妈 链接:http://www.pythonheidong.com/blog/article/74/ 来源:python黑洞网 有什么 ...

  5. 2014-4-5安装python以及基础知识

    1.下载安装 从python官网下载python2.7.6 https://www.python.org/download/releases/2.7.6 建议用迅雷下载 会比较快 2.交互式解释器 运 ...

  6. ORACLE ASH/AWR

    (一) ASH 用户在ORACLE数据库中执行操作时,必然要创建相应的连接和会话,其中,所有当前的会话信息都保存在动态性能视图V$SESSION中,通过该视图,DBA可以查看用户实际执行的操作,或者当 ...

  7. poj 1182用向量的思考模式

    不会写果断看答案http://cavenkaka.iteye.com/blog/1489588 #include<stdio.h> #include<string.h> #de ...

  8. 【SGU194&ZOJ2314】Reactor Cooling(有上下界的网络流)

    题意: 给n个点,及m根pipe,每根pipe用来流躺液体的,单向的,每时每刻每根pipe流进来的物质要等于流出去的物质,要使得m条pipe组成一个循环体,里面流躺物质. 并且满足每根pipe一定的流 ...

  9. hdu - 3549 Flow Problem (最大流模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=3549 Ford-Fulkerson算法. #include <iostream> #include ...

  10. Java日期LocalDate使用

    在做报表统计时,需要对指定时间内的数据做统计,则需要使用到时间日期API 在此使用的是java.util.Date的完美私生子LocalDate类 LocalDate方法介绍 now() : 从默认时 ...