Background image position change in jquery animation

Question

I want to change the background image position in jquery animation. But my code is not working. Can any one help me to short it out.

Followings are my code

Css

#pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;
}

Jquery

$('#pnav a')
.hover(function () {
    $(this).stop().animate({
        'background-position' : '(0px -42px)'
    }, 150);
}, function () {
    $(this).stop().animate({
        'background-position' : '(0 0)'
    }, 150);
});

html

<div id="pnav">
<a href="#">123</a>
</div>

this is the Fiddle file

Thank you in advance.

i guess , you might not have included your script inside document.ready. that's why it is getting called when the document is not ready. I've updated my code. and its a simple html. its working. — Manish Mishra, Feb 25 '13 at 09:56

xpy · Answer 1 · 2013-02-25T08:56:04.483

4

I think that jQuery animation can't animate background-position, but you can use CSS transitions instead

    #pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;

    -webkit-transition: background-position 150ms ease-in-out;
    -moz-transition: background-position 150ms ease-in-out;
    -ms-transition: background-position 150ms ease-in-out;
    -o-transition: background-position 150ms ease-in-out;
    transition: background-position 150ms ease-in-out;
}

#pnav a:hover {
    background-position:0px -42px;

}

here's a fiddle: http://jsfiddle.net/pavloschris/eg5zC/7/ and the transition browser combatibility : http://caniuse.com/#search=transition

edited Feb 25 '13 at 08:56

answered Feb 25 '13 at 08:13

xpy

5,481
3
29
48

I think you forgot to click on 'Update' in your fiddle, however your approach does work – Jason Sperske Feb 25 '13 at 08:16
1

Also jQuery can animate background-position - http://stackoverflow.com/a/5078298/16959, however jsfiddle seems to interfere with demonstrating this – Jason Sperske Feb 25 '13 at 08:18

score 2 · Accepted Answer · edited Feb 10 '14 at 10:20

For Background image position animation we need to use "jquery.backgroundpos.js" You can download it from here http://keith-wood.name/js/jquery.backgroundpos.js

$(document).ready(function(){

$('#pnav a')
.hover(function () {
   $(this).stop().animate({backgroundPosition: '0px ' + '35px'}, 500);
}, function () {
    $(this).stop().animate({backgroundPosition: '0px ' + '0px'}, 500);
});


});

here is the updated jsFiddle file

score 0 · Answer 3 · answered Feb 25 '13 at 08:06

0

Replace your line with this ,

background:url('http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif') no-repeat ;

Add inverted commas for URL in CSS

answered Feb 25 '13 at 08:06

EnterJQ

1,014
8
18

you don't need to put quotes around url's in CSS – Jason Sperske Feb 25 '13 at 08:12

score 0 · Answer 4 · edited May 23 '17 at 12:29

inside animate function, background-position doesn't work like that. use this instead

$('#pnav a')
.hover(function () {
    $(this).animate({
        'background-position-x': '10%',
        'background-position-y': '20%'
    }, 550);
}, function () {
    $(this).animate({
       'background-position-x': '0%',
       'background-position-y': '0%'
    }, 550);
});

:ref

however, what you want can be achieved through CSS3.0 as 'xpy' pointed out, but it won't run on IE

Update:

below is working sample:

<html>
    <head>
        <script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script>
         $(document).ready(function(){
          $('#pnav a')
                    .hover(function () {
                        $(this).animate({
                            'background-position-x': '10%',
                            'background-position-y': '20%'
                        }, 550);
                    }, function () {
                        $(this).animate({
                           'background-position-x': '0%',
                           'background-position-y': '0%'
                        }, 550);
                    });
            });
        </script>
       <style>
            #pnav a{
                background:url(http://www.standard-icons.com/stock-icons/standard-road/scooter-icon.gif) 0 0 no-repeat;
                display:block;
                width:20px;
                height:42px;
            }
       </style>

    </head>
    <body>
            <div id="pnav">
              <a href="#">123</a>
           </div>
    </body>
</html>

Fiddle

hey sonasish, i made this out of your fiddle itself, and it was working for me. you might wanna adjust co-ordinate values, otherwise its pretty simply right?? — Manish Mishra, Feb 25 '13 at 09:37
its working on fiddle because, they make sure of document.ready, but your original code might not have it. anyways. uplinking fiddle in a moment — Manish Mishra, Feb 25 '13 at 09:59

Background image position change in jquery animation

4 Answers4

Update:

Fiddle