jQuery .animate() 不在 IE 中为 backgroundPosition 设置动画

Posted 2023-05-08

【中文标题】jQuery .animate() 不在 IE 中为 backgroundPosition 设置动画

【英文标题】：jQuery .animate() not animating backgroundPosition in IE

【发布时间】：2011-03-04 22:04:12

【问题描述】：

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

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

我不能传递“中心”，因为它只会接受数值。我的目标是以像素为单位计算页面的中心（宽度 = (width / 2) - 700;），然后动画到这个粗略的位置（由于滚动条，它通常会超出几个像素，然后强制到中心使用 .css() 调用。

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

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

谢谢

【参考方案1】：

我建议将背景放在网站底部的容器 div 上。然后展开上面的登录，让浏览器为你做事！

这里有一个基本功能的简单演示：

http://jsfiddle.net/UkGva/

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

这也应该适用于滚动条和所有（我发现即使在像 chrome 这样的工作浏览器中它也有点偏离）。并且你可以编写更少的 javascript！