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

时间：2021-07-19 08:41:52

在网上找的ffSupp.js文件

/**

 * 自定义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);

在animate.html中这样写(部分代码)

<body>

    <script src="jquery-1.11.3.js"></script>

    <script language="javascript">

          for(var j0=0;j0<5;j0++){

		var juli0=j0*29*(-1)+"px";

		var juli00="0px"+"\u0020"+juli0;

		$("#num"+(j0+1)).animate({

			backgroundPosition:juli00}, 1500);}

    </script>

    <script src="ffSupp.js"></script>

</body>

　　

相关文章