0

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?

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

});
LW001
  • 2,452
  • 6
  • 27
  • 36
Corey Tegeler
  • 149
  • 1
  • 13

1 Answers1

1

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

});
Community
  • 1
  • 1
JimTheDev
  • 3,469
  • 1
  • 23
  • 26
  • Hey thanks for the help! This definitely cleared things up for me a lot. – Corey Tegeler Aug 12 '13 at 19:16
  • No problem. Page looks good. Shoot me an upvote if this was helpful to get me over the 50 point hump! – JimTheDev Aug 12 '13 at 20:35
  • Gotcha! I've updated the original post with your code (as well as a few minor add ons) but I'm still having trouble. Using the position capturing technique which has worked in this example before now causes Firefox to have the same flaw and still doesn't work right in Safari. Although Firefox does work right when I get rid of that part. – Corey Tegeler Aug 12 '13 at 20:56