CODEWITHSUNDEEP
javascriptjquerycss
user3117081
user3117081

Reputation: 91

How to control CSS sprites with JQuery

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'
        }); 
    }); 
});

Upvotes: 0

Views: 88

Answers (2)

showdev
showdev

Reputation: 29168

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

Upvotes: 1

Hugo Tunius
Hugo Tunius

Reputation: 2879

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/

Upvotes: 2

Related Questions