jquery animate() IE9 和 chrome - 奇怪的行为！

Question

请在此处查看此页面。

这是 jquery animate() 的一个非常简单的部分，它将标题文本动画到页面顶部 - 仅此而已！

在 FF 和 Opera 中它是完美的。

在 IE9 中，它首先跳到页面底部，然后向上动画。

在 Chrome 中，它会跳到页面顶部，然后向下动画！

卧槽！

jquery 调用是：

$(function(){

    $('#name_holder').click(function(){
        $('#name_holder_wrap').animate(

            {top: '75px'}
            , 500
            , 'swing'
            , function() {
                $('#name_holder').attr({"style": 'cursor:default'});
            }
        );
    }); 
});

这是所涉及元素的 css：（

#name_holder_wrap {
    padding: 0px;
    width: 100%;
    position: absolute;
    height: auto;
    top: 45%;
}

#name_holder {
    padding: 0px;
    width: 600px;
    height: auto;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    display: block;
    cursor: pointer;
}

抱歉，我还没有完全弄清楚如何正确地将代码插入到这些帖子中 - 无法将那些右花括号包含在代码块中 -我正在努力！）

所以，我真的很感激任何关于这方面的指示——我已经为此奋斗了几个小时，真的需要继续前进！

非常感谢！

斯科特

Answer 1

在 IE9 中也对我来说工作得很好，但 Chrome 的修复方法是将动画设置为百分比值而不是像素：

$(function(){

    $('#name_holder').click(function(){
        $('#name_holder_wrap').animate(

            {top: '15%'}
            , 500
            , 'swing'
            , function() {
                $('#name_holder').attr({"style": 'cursor:default'});
            }
        );
    }); 
});

如果这不起作用，您可以更改 css 中的百分比值，也许需要一些 javascript 的帮助。

Answer 2

这里的问题是 CSS 和 JQuery 的组合，它们需要正确才能使 IE 和 Chrome 都能按您希望的方式工作。

以下是我的设置方法，效果很好。

.object_to_be_animated {
  position: absolute;
  left: 0;
  top: 96px;
  width: 259px;
  height: 85px;
  background: url(...) left top repeat; }

这里重要的是我使用 TOP 绝对定位我的元素，而不是底部。

然后我像这样构造我的 Jquery

function slide_up() { $(this).children(".overlay").animate({top: '-=51px'}); }
function slide_down() { $(this).children(".overlay").animate({top: '+=51px'}); }

$(".rolloverLink").hoverIntent(slide_up,slide_down);

记住与 CSS 和 JQuery 使用相同的单位，我建议使用像素，因为它可以保持精确。不要混合 em、px、%。

这应该有望解决问题