Animate background image up?

[jarv]

Hi, On my site in my footer I have some social media icons that animate the background up when I hover over.

I would like to do this on my 4 main boxes: Who, work, blog, contact
as you can see, I have attempted it on the first box: "Who are we?"

here is my site:

http://staging.graphitedigital.com/2013/dev/#

Javascript

jQuery('ul#sections li#who').hover(function() {
				jQuery(this).stop().animate({
					marginTop : '-182px'
				}, {queue:false,duration:600,easing:'easeInOutQuint'});
				}, function(){
					jQuery(this).stop().animate({
					marginTop : '0px'
					}, {queue:false,duration:850});
			});

[harbingerOTV]

You could always leave the simple color swap you have now for default and then use CSS3 for the browsers that like it:
transition: background-position
http://www.impressivewebs.com/demo-f...mated-sprites/

If you want to use jQuery like you are trying to do, you are moving the wrong thing.

jQuery('ul#sections li#who').hover(function() {
				jQuery(this).stop().animate({
					marginTop : '-182px'

That moves the <li> itself. You want to animate the background-position of the <li> instead.

[jarv]

ok thanks, I have added <span></span> inside the <li> and targeted that but it's not working?!

			jQuery('ul#sections li#who a span').hover(function() {
				jQuery(this).stop().animate({
					marginTop : '-182px'
				}, {queue:false,duration:600,easing:'easeInOutQuint'});
				}, function(){
					jQuery(this).stop().animate({
					marginTop : '0px'
					}, {queue:false,duration:850});
			});

[harbingerOTV]

Remove the background from the LI and give it to the SPAN.

ul#sections li#who a span {
    background: url("../_img/AboutBox_image.png")top left no-repeat;
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
}

then (untested but close if not) :

			jQuery('ul#sections li#who a').hover(function() {
				jQuery('span', this).stop().animate({
					top : '-182px'
				}, {queue:false,duration:600,easing:'easeInOutQuint'});
				}, function(){
					jQuery('span', this).stop().animate({
					top : '0px'
					}, {queue:false,duration:850});
			});

[jarv]

yes close, thanks.
I have got to this stage before:
http://staging.graphitedigital.com/2013/dev/#

it's suppose to be orange underneath though?!

[jarv]

can anyone help here please?