jQuery driven navigation is not always triggering the mouseout event

Question

I have a jquery script which animates the background position of each element within a parent when rolled over. I am using backgroundPosition in my script which handles the animation of the background image. I am using $.event.special.hover to handle the hovering as it takes care of a lot of the usability quirks of a jquery nav.

My problem is that every so often, one of the tabs will catch and the mouseout state will not be triggered. However, the errors the browsers are giving me are related to the backgroundPosition script rather than the hover.

In IE8, I get "Invalid argument - jquery.backgroundPosition.js - Line 19, Char 13" In FF, I get "Error in parsing value for 'background-position'. Declaration dropped".

Here's my code, followed by the backgroundPosition code:

function loadNav(){
var horizontalPos = [0,-109,-232,-362,-447,-543,-653];

    var currentLink = '';

    $('#navigation div.top-div').each(function(i){

        $(this).find("a").stop();

        if($(this).attr('id') != 'current'){

            $(this).find("a").css({backgroundPosition: ''+horizontalPos[i]+'px 18px'})

            var under;

            function hoverOver(){
                currentLink = $(this).attr('class');
                $(this).find("a").stop(true, false).animate({ backgroundPosition: '('+horizontalPos[i]+'px 0px)' }, 250, function() {  });
            }

            function hoverOut(){
                $(this).find("a").stop(true, false).animate({ backgroundPosition: '('+horizontalPos[i]+'px 18px)' }, 250, function() {  });
                currentLink = '';
            }

            $(this).bind('hover',{speed:150, delay:50},function(){
            hoverOver})
            .bind('hoverend',function(){
            hoverOut});

            $(this).hover( hoverOver, hoverOut ); 

        } else {
            $(this).find("a").css({backgroundPosition: ''+horizontalPos[i]+'px 0px'});
        }
    });

}

backgroundPosition:

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

It's not a frequent occurrence, but losing the mouseout state even once is frustrating.

Any thoughts on the issue? Or an alternative to using the backgroundPosition at all?