Question

I have this simple HTML:

<span class="coverImg" style="background-image:url('images/show2.jpg');"></span></a>

and some Javascript:

$(function() {
            $(".coverImg").hover(function() {
                $(this).animate({
                    backgroundPosition : "0 0"
                }, "fast");
            }, function() {
                $(this).animate({
                    backgroundPosition : "50% 50%"
                }, "fast");
            });
        });

so when the mouseover the function is work correctly although the animation is not so perfect nice and easing is hardly seen..
but when mouseout the function is not working ,the background image just sit there not moving even on pixel…

What’s the problem? What have I missed?

OR:

$(function() {
            $(".coverImg").mouseover(function() {
                $(this)
                .animate({
                    "background-position-x" : "-=20px",
                    "background-position-y" : "-=20px"
                }, "fast");
            }).mouseout(function() {
                $(this).animate({
                    "background-position-x" : "0 ",
                    "background-position-y" : "0"
                }, "fast");
            })
        })

this works only in the Chrome…

so again what’s the problem ! what’s the bug ! what i have miss?!

Answer 1

I don’t think jQuery can animate background positions be default — I use http://archive.plugins.jquery.com/project/backgroundPosition-Effect

The standard CSS does not support the background-position-x and background-position-y, only a few support this like Chrome.

And jQuery’s animate() method does not support animate two values at the same time, it’ll turn out to be a error sometime or just do not doing anything in some browsers.

So after all, check this out http://snook.ca/archives/javascript/jquery-bg-image-animations. There should be a jQuery plugin called jQuery.bgpos.js that works very well if you want to animate the background position.

Code is like this:

(function($) {
$.extend($.fx.step, {
    backgroundPosition : function(fx) {
        if(fx.state === 0 && typeof fx.end == 'string') {
            var start = $.curCSS(fx.elem, 'backgroundPosition');
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0], end[2]];
            fx.unit = [end[1], end[3]];
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
        function toArray(strg) {
            strg = strg.replace(/left|top/g, '0px');
            strg = strg.replace(/right|bottom/g, '100%');
            strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
            var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
            return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
        }

    }
});})(jQuery);