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 处理将内联元素转换为固定元素的方式。无论如何，当您将元素更改为 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');
    });

});