WebKit animation on click function bug

I have the below code set up to move certain objects upon clicking an object, but you'll see in Safari and Chrome that the animation for the boxes is a bit off, whereas Firefox shows it correclty.

Is there a way to fix this bug?

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

});

---

What you are experiencing is the way that webkit handles conversion of an inline element into a fixed element. No matter what, it is going to default the left to 0 when you change the element to fixed, even if you explicitely tell it otherwise. You can ready more about how to work around it here: Center a position:fixed element

Basically you need to set the left position of the element to 50%, then calculate the a negative margin of 1/2 the width of the element.

Good luck and perhaps look at rewriting your code. You should check out JQuery chaining as some of your code is redundant. Also, since you are only targeting one element, you can drop the .each() as they are not needed. You would only use .each when you want to loop through a selector that could have returned more than one element. In your case, your selectors only target the one element. I've rewritten your code a bit to be more readable, less redundant:

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

});

链接地址: http://www.djcxy.com/p/75820.html

上一篇: 如何使用CSS水平居中绝对div？

下一篇: 点击功能bug的WebKit动画