jquery的animate关于background-position属性

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);

posted @ 2013-07-27 09:29  我爱小明  阅读(2896)  评论(0编辑  收藏  举报