jQuery .animate() not animating backgroundPosition in IE
- by mikemike
I'm trying to animate a background image to move down a set amount of pixels but remain in the center of the page. Upon another click of an element I need it to move back to the top, but still remain in the center. Below is the current code:
$(document).ready(function() {
$('#email_campaigns').click(function(){
var width = $(window).width();
width = (width / 2) - 700;
if($('#email_campaigns_box').css('display') == 'none'){
//$('body').css('background-position','center 119px');
$('body').animate({
backgroundPosition: (width + "px 119px")
}, {duration:500});
} else {
//$('body').css('background-position','center top');
$('body').animate({
backgroundPosition: (width + "px 0px")
}, {duration:500});
}
$('#email_campaigns_box').slideToggle("slow");
$('#client_login_box').slideUp("slow");
});
$('#client_login').click(function(){
var width = $(window).width();
width = (width / 2) - 700;
alert(width);
if($('#client_login_box').css('display') == 'none'){
//$('body').css('background-position','center 119px');
$('body').animate({
backgroundPosition: (width + "px 119px")
}, {duration:500});
} else {
//$('body').css('background-position','center top');
$('body').animate({
backgroundPosition: (width + "px 0px")
}, {duration:500});
}
$('#client_login_box').slideToggle("slow");
$('#email_campaigns_box').slideUp("slow");
});
});
I cannot pass 'center', as it will onyl accept numeric values. My goal is to calulate the center of the page in pixels (width = (width / 2) - 700;), and then animate to this rough position (it's normally out by a few pixels due to scrollbars, and then force to the center using a .css() call.
The problem is that IE does not want to play ball. IE will not animate at all. Firefox/Safari/Chrome all work as expected.
Below is a live example:
http://recklessnewmedia.com/new/#
(click 'email campaigns' at the top).
Thanks
