How to control CSS sprites with JQuery

Question

This doesn't animate as I expect it would, why doesn't it animate?

HTML

<div id='menuI'></div>

CSS

#menuI {
    height: 100px;
    width: 100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    text-align:justify;
}

JavaScript

$(document).ready(function(){
    $('#menuI').mouseenter(function(){
        $('#menuI').stop();
            $('#menuI').animate({
                backgroundPosition: '0px 100px'
            }); 
        });
    $('#menuI').mouseleave(function(){
        $('#menuI').stop();
        $('#menuI').animate({
            backgroundPosition: '0px 0px'
        }); 
    }); 
});

Hugo Tunius · Accepted Answer · 2013-12-19 00:26:14Z

2

As showdev said you need a jQuery plugin to achieve this. However you can also consider using transitions instead since it is very well suited for this.

The following css will cause the same

#menuI {
    height:100px;
    width:100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    transition: background linear 0.4s; //Add vendor prefixed versions
    text-align:justify;
}

#menuI:hover {
    background-position: 0px 100px;
}

Example: http://jsfiddle.net/9fCnN/

answered Dec 19, 2013 at 0:26

Hugo Tunius

2,88927 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

showdev Over a year ago

Nice alternative to using jQuery. Re: "vendor prefixed versions" for cross-browser support: jsfiddle.net/9fCnN/1

Community · Accepted Answer · 2017-05-23 12:11:34Z

1

I believe a plugin is required to animate "backgroundPosition".

I had success using the background-position-y property:

$(document).ready(function () {
    $('#menuI').mouseenter(function () {
       $(this).stop().animate({'background-position-y':'100px'});
     });
    $('#menuI').mouseleave(function () {
        $(this).stop().animate({'background-position-y':'0px'});
    });
});

http://jsfiddle.net/Ub7aN/1/

Edit:

Unfortunately, this does not seem to work in Firefox.

See these posts:
JQuery Animate Background Image on Y-axis
Animate background position y in Firefox with Jquery

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Dec 19, 2013 at 0:22

showdev

29.3k37 gold badges61 silver badges82 bronze badges

3 Comments

showdev Over a year ago

It doesn't work in the jsfidde or on your own page? What goes wrong? Which version of jQuery?

user3117081 Over a year ago

Works in Chrome though, weirdness; I'd like this to be supported across browsers. I might just have to write my own loop to animate it for cross browser support :O

showdev Over a year ago

There are some other posts here on SO dealing with animation of background position. You might want to check them out. Some interesting methods. Also, CSS transitions are pretty sweet (see answer by @HugoTunius).

Collectives™ on Stack Overflow

How to control CSS sprites with JQuery

2 Answers 2

1 Comment

Edit:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Edit:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related