Jquery animate clearing the css position

I am trying to animate a div(tip) like so:

tip.animate({'top': '+=20px', 'opacity': 'toggle'}, 300);

I am using it as a tooltip so before this I position the tip relative to the cursor like so:

setTip = function(top, left){
        var topOffset = tip.height();
        var xTip = (left-30)+"px";
        var yTip = (top-topOffset)+"px";
        tip.css({'top' : yTip, 'left' : xTip});

The setTip function works good as it sets the div properly but when I try and animate the div in the top position is set to 20px. I used console.log to check yTip. It's almost like the animate top property is reset the top css position to 0 then adding 20px because the div animates in correctly but at the top of the page and horizontally it is correct.

I changed the animation to be left to test it and the same thing happened. The div animated in correctly with the vertical position correct but th开发者_如何学Goe horizontal position was on the left side of the page 20 px off the left side.

Has anyone seen this before or have an idea what I am doing wrong? Thanks for the help.

Nick