jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position。

  1. 谷歌支持 background-position-x; background-position-y ;firefox不支持。
  2. 使用 background-position 插件
  3. 使用另外一个background-position插件:_this.animate({'background-position':'477px 0px'},750);
  4. /* http://keith-wood.name/backgroundPos.html
       Background position animation for jQuery v1.1.1.
       Written by Keith Wood (kbwood{at}iinet.com.au) November 2010.
       Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
       MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
       Please attribute the author if you use it. */

    (function($) { // Hide scope, no $ conflict

    var BG_POS = 'bgPos';

    var usesTween = !!$.Tween;

    if (usesTween) { // jQuery 1.8+
        $.Tween.propHooks['backgroundPosition'] = {
            get: function(tween) {
                return parseBackgroundPosition($(tween.elem).css(tween.prop));
            },
            set: function(tween) {
                setBackgroundPosition(tween);
            }
        };
    }
    else { // jQuery 1.7-
        // Enable animation for the background-position attribute
        $.fx.step['backgroundPosition'] = setBackgroundPosition;
    };

    /* Parse a background-position definition: horizontal [vertical]
       @param  value  (string) the definition
       @return  ([2][string, number, string]) the extracted values - relative marker, amount, units */
    function parseBackgroundPosition(value) {
        var bgPos = (value || '').split(/ /);
        var presets = {center: '50%', left: '0%', right: '100%', top: '0%', bottom: '100%'};
        var decodePos = function(index) {
            var pos = (presets[bgPos[index]] || bgPos[index] || '50%').
                match(/^([+-]=)?([+-]?\d+(\.\d*)?)(.*)$/);
            bgPos[index] = [pos[1], parseFloat(pos[2]), pos[4] || 'px'];
        };
        if (bgPos.length == 1 && $.inArray(bgPos[0], ['top', 'bottom']) > -1) {
            bgPos[1] = bgPos[0];
            bgPos[0] = '50%';
        }
        decodePos(0);
        decodePos(1);
        return bgPos;
    }

    /* Set the value for a step in the animation.
       @param  tween  (object) the animation properties */
    function setBackgroundPosition(tween) {
        if (!tween.set) {
            initBackgroundPosition(tween);
        }
        $(tween.elem).css('background-position',
            ((tween.pos * (tween.end[0][1] - tween.start[0][1]) + tween.start[0][1]) + tween.end[0][2]) + ' ' +
            ((tween.pos * (tween.end[1][1] - tween.start[1][1]) + tween.start[1][1]) + tween.end[1][2]));
    }

    /* Initialise the animation.
       @param  tween  (object) the animation properties */
    function initBackgroundPosition(tween) {
        if (!usesTween) {
            var elem = $(tween.elem);
            var bgPos = elem.data(BG_POS); // Original background position
            elem.css('backgroundPosition', bgPos); // Restore original position
            tween.start = parseBackgroundPosition(bgPos);
        }
        tween.end = parseBackgroundPosition($.fn.jquery >= '1.6' ? tween.end :
            tween.options.curAnim['backgroundPosition'] || tween.options.curAnim['background-position']);
        for (var i = 0; i < tween.end.length; i++) {
            if (tween.end[i][0]) { // Relative position
                tween.end[i][1] = tween.start[i][1] + (tween.end[i][0] == '-=' ? -1 : +1) * tween.end[i][1];
            }
        }
        tween.set = true;
    }

    /* Wrap jQuery animate to preserve original backgroundPosition. */
    if (!usesTween) { // jQuery 1.7-
        $.fn.animate = function(origAnimate) {
            return function(prop, speed, easing, callback) {
                if (prop['backgroundPosition'] || prop['background-position']) {
                    this.data(BG_POS, this.css('backgroundPosition') || 'left top');
                }
                return origAnimate.apply(this, [prop, speed, easing, callback]);
            };
        }($.fn.animate);
    }

    })(jQuery);

jquery的animate关于background-position属性的更多相关文章

  1. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  2. jQuery之animate()用法

    最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下. 概述 animate() 方法执行 CSS 属性 ...

  3. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  4. jquery的api以及用法总结-属性/css/位置

    属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性 获取或者设置匹配的元素集合中的第一个元素的属性的值 如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...

  5. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  6. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  7. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  8. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  9. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

随机推荐

  1. Jboss,Tomcat 远程调试配置

    Jboss,Tomcat 远程调试配置 2007-12-25 15:51:01|  分类: 默认分类|字号 订阅   Eclipse远程调试JBoss应用 修改JBoss启动配置            ...

  2. Forward团队-爬虫豆瓣top250项目-模块测试过程

    我所做的模块不需要测试,但在后续其他人编写代码的时候,我需要对网页源码进行进一步的规范,然后指导别人在网页源码中的标签用法.

  3. 通过 cygwin64 自己编译对应的 Tera Term cyglaunch.exe

    步骤如下: 将 cygterm+.tar.gz解压到任意目录,当然要cygwin容易操作.(本例直接放到$HOME目录下,启动cygwin后的默认目录,如果之前没有更改的话) 将 Makefile 中 ...

  4. Appium 之处理首次启动手机App时的系统权限弹框

    一般首次启动一个手机App时都会有系统权限弹框,如下图所示: 权限弹窗上面的按钮都是固定的,只需要定位到“ALLOW”按钮,点击就可以了,代码如下: 这里主要用selenium里面的显示等待模块(We ...

  5. Template Method Design Pattern in Java

    Template Method is a behavioral design pattern and it’s used to create a method stub and deferring s ...

  6. 配置IIS Express,支持JSON

    方法有2种: 1. 命令行 a. cd "iis express的安装目录"  例如:cd C:\Program Files (x86)\IIS Express b. appcmd ...

  7. 在Excel中导入文本文件(CSV/TXT),自定义隔离符号

    经常需要在Excel中导入文本文件,但是需要自定义隔离符号,例如空格或者逗号,参考一下方法:

  8. .net core redis使用

    整理下.net core的redis使用  可以分布式 Nuget安装 StackExchange.Redis using System; using System.Collections.Gener ...

  9. php 命令行脚本运行php文件简单演示

    众说周知,php在web服务器领域有着很重要的角色,可是它不仅仅在web领域,只是在web领域表现更为优秀! 它基本有三种用途: web服务端脚本的编写 应用程序图形界面(类似windows自带的计算 ...

  10. python网络编程--管道,信号量,Event,进程池,回调函数

    1.管道 加锁可以保证多个进程修改同一块数据时,同一时间只能有一个任务可以进行任务修改,即串行修改,速度慢了,但牺牲了速度却保证了数据安全. 文件共享数据实现进程间的通信,但问题是: 1.效率低(共享 ...