Chrome WebKit动画关于点击函数的bug

5rgfhyps  于 2023-09-28  发布在  Go
关注(0)|答案(1)|浏览(102)

我有下面的代码设置为点击一个对象时移动某些对象,但你会看到在Safari和Chrome中,框的动画有点关闭,而Firefox显示它正确。
有办法解决这个bug吗?

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

});
j8yoct9x

j8yoct9x1#

您正在体验的是webkit处理将内联元素转换为固定元素的方式。无论如何,当你将元素更改为fixed时,它将默认左侧为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');
    });

});

相关问题