javascript - WebKit 动画点击功能错误

Question

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

有没有办法修复这个错误？

http://coreytegeler.com/jg/

    $(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 处理将内联元素转换为固定元素的方式。无论如何，当您将元素更改为固定时，它会将左侧默认为 0，即使您明确告知它。您可以在此处准备更多有关如何解决它的信息：居中位置：固定元素

基本上你需要将元素的左侧位置设置为 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');
    });

});