Question

我将以下代码设置为在单击对象时移动某些对象，但您会在Safari和Chrome中看到框中的动画有点偏离，而Firefox显示它是正确的。

有没有办法解决这个错误？

    $(function(){
    $("#nav li").click(function() {
        $("#nav").css({
            'left' : $(this).position().left + 'px',
            'top' : $(this).position().top + 'px'
        })
        .animate({
             'margin-top' : '-175px',
              'margin-left' : '0px',
            'left' : '10px',
            'top' : '50%',
            'height' : '370px',
            'width' : '70px'
        }, 500, 'swing');

        $("#name").css({
            'top': $(this).position().top + 'px'
        })
        .animate({
            'top' : '100px'
        } , 500, 'swing');
    });

    $("#nav li#a").click(function() {
        $(".set#a").animate({
            'opacity' : '1' ,
            'top' : '50%',
             'margin-top' : '-200px'
            }, 500, 'swing');
    });

});

Answer 1

您遇到的是webkit处理内联元素转换为固定元素的方式。无论如何，当你将元素更改为fixed时，它会将left默认为0，即使你明确地告诉它。您可以在此处详细了解如何解决此问题：Center a position:fixed element

基本上你需要将元素的左侧位置设置为50％，然后计算元素宽度的1/2的负边距。

祝你好运，也许看看你的代码重写。您应该检查JQuery链接，因为您的一些代码是多余的。此外，由于您只定位一个元素，因此可以删除.each（），因为它们不需要。当你想循环遍历可能返回多个元素的选择器时，你只能使用.each。在您的情况下，您的选择器仅针对一个元素。我稍微重写了你的代码，使其更具可读性，更少冗余：

$(function(){
    $("#nav ul li").click(function() {
        $("#nav ul").css({
            'position' : 'fixed',
            'left' : $(this).position().left + 'px',
            'top' : $(this).position().top + 'px'
        })
        .animate({
            'left' : '10px',
            'top' : '50%',
            'margin-top' : '-140px',
            'height' : '280px',
            'width' : '70px'
        }, 500, 'swing');

        $("#name").css({
            'top': $(this).position().top + 'px'
        })
        .animate({
            'position' : 'fixed',
            'top' : '100px'
        } , 500, 'swing');
    });

    $("#nav ul li#a").click(function() {
        $(".set#a").animate({
            'opacity' : '1' ,
            'top' : '50%'}, 500, 'swing');
    });

});

单击功能bug上的WebKit动画

1 个答案: