Question

我正在尝试为背景图像设置动画以向下移动一定量的像素，但仍保留在页面的中心。再次点击一个元素我需要它回到顶部，但仍然保持在中心。以下是当前代码：

        $(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");              
        });
    });

我无法传递'center'，因为它将onyl接受数值。我的目标是以像素为单位计算页面的中心（宽度=（宽度/ 2） - 700;），然后设置为这个粗略位置的动画（由于滚动条，它通常会出几个像素，然后强制到中心使用.css（）调用。

问题是IE不想打球。 IE根本不会动画。 Firefox / Safari / Chrome都按预期工作。

以下是一个实例： http://recklessnewmedia.com/new/# （点击顶部的“电子邮件广告系列”）。

由于

Answer 1

我建议将背景放在网站底部的容器div上。然后展开上面的登录，让浏览器为您完成工作！

基本功能的简单演示如下：

http://jsfiddle.net/UkGva/

这样你就不得不编写更少的代码，并且jquery不需要做任何繁重的工作。虽然需要进行一些重组，但只需将登录（隐藏部分）放在容器底部的容器上。

而且这应该适用于滚动条和所有（我看到即使在像Chrome这样的工作浏览器中也有点关闭）。你写的javascript就少了！

jQuery .animate（）没有动画IE中的backgroundPosition

1 个答案: