jQuery and backgroundPosition issue

JavaScript
1

Hello,

I am facing a problem now after upgrading jQuery to v1.7.1. The following stopped working (and it used to work just fine with jQuery 1.4.2 before the upgrade):


	$(function()
	{
		$("#nav a").hover(function()
		{
			$(this).stop().animate({ backgroundPosition: "(0px 50px)" }, 175);
		},
		function()
		{
			$(this).stop().animate({ backgroundPosition: "(0px 100px)" }, 175);
		});
	});

Has anyone come accross this problem, and knows a possible fix it? I assume it’s caused by a syntax change but can’t figure out what is different now.

Thanks a lot!

2

Yep, they changed things there from jQuery 1.5 onwards. You’ll now need to separate them out in to x and y settings.

For example:

$(this).animate({'background-position-x': '0px', 'background-position-y': '50px'}, 175);
3

Thanks, Paul, I managed to rework the backgroundPosition into background-position-x and background-position-y settings to be able to use jquery-1.7.1. However, that also broke a slider that I’m using on the same page. The error manager says “curAnim is undefined” and points to the slider script. I did a quick check and noticed that even though jquery 1.4.2 has the curAnim property, it’s definitely missing from the latest version of the library. Is there a way to bring it back via extending jquery somehow? I’d very much want to know that since I managed to fix 3 other scripts to be able to use them with the latest jquery, and it’s this slider that messes things up…

Thanks again!

4

What is the slider that you are using?

5

Hi Paul,

It’s the jQuery siteFeature plugin: http://s3.envato.com/files/376136/index.html that I’m trying to fix. It runs on an older version of jQuery and I’m trying to make it work with the latest which does not seem to have the curAnim property defined. Thanks a lot!

6

First start by using the latest version of sitefeature - the version that it’s at is at least 2.7.1, and I see in some places that there is a version at 2.7.5 as well. The one you are currently using seems to be 2.6

7

I see, I downloaded sitefeature 2.7.1 and looked at the code, there seems to be an instance of “curAnim” among the lines so I guess the problem is there still. Haven’t found a version 2.7.5 to see if it’s the same there…

8

Apparently, the use of the curAnim feature relates to the tab arrow background animation which I can definitely live without it if nothing can be done about the lines quoted below, for the sake of bringing the slider back to a working state. Either way, thanks for pointing out a new version of the script available, I’ll make sure I’ll upgrade to the latest available.

    $.fx.step.backgroundPosition = function(a) {
        if (!a.bgPosReady) {
            var b = $.curCSS(a.elem, 'backgroundPosition');
            if (!b) {
                b = '0px 0px'
            }
            b = toArray(b);
            a.start = [b[0], b[2]];
            var c = toArray(a.options.[COLOR="#FF0000"]curAnim[/COLOR].backgroundPosition);
            a.end = [c[0], c[2]];
            a.unit = [c[1], c[3]];
            a.bgPosReady = true
        }
        var d = [];
        d[0] = ((a.end[0] - a.start[0]) * a.pos) + a.start[0] + a.unit[0];
        d[1] = ((a.end[1] - a.start[1]) * a.pos) + a.start[1] + a.unit[1];
        a.elem.style.backgroundPosition = d[0] + ' ' + d[1]
    }

As far as I know, backgroundPosition became “background-position-x” and “background-position-y” in the newer jquery so the problem may be linked to that…

9

It didn’t work. Removing the lines around “curAnim” cause the slider to break after reaching the end tab. It normally should go back to the first tab but it doesn’t… So I may need some further help here, please.

10

About the best advice that I can give from here is that you get in touch with the developer of the plugin.
SiteFeature discussion: http://codecanyon.net/item/sitefeature/discussion/53896
Makfak’s profile: http://codecanyon.net/user/makfak
Makfak’s website: http://www.makfak.com/

If you cannot convince him to update it for a more recent version of jQuery, you’ll have to decide whether to stay with the older version of jQuery, or to find a different plugin that works in the version of jQuery that you want to use.

11

Thanks, I appreciate your help!