JQuery animation doesn't do what is intended

Good day everyone. As I am relearning jquery I have come to an issue that I can't resolve. My animation function moves the image I want to be moved to the intended target, but before that it moves it in the entirely different direction. I've tried out all css positionings to no avail. Here comes the Jquery...

for (i = 0; i < 7; i = i + 3) {
          if (empty[i] == true) {
                 empty[i] = false;
                 targets[i].droppable("disable");

                 if (tier % 2 == 1) {
                    targets[i].append(mypic);
                    mypic.hide();
                    mypic.fadeIn(900);
                    }
                 else {
                    pos = targets[i].position();
                    mypic.css("position", "relative");
                    targets[i].append(mypic);
                    mypic.animate({'left': pos.left, 'top': pos.top}, 'slow');
                    }
                 break;
          }
      }

All variables do have values and tier is even in this case. The fadein animation works like a charm. Only the animate does as I mentioned above. What have I done wrong? TIA for your answers. If you want I could post the HTML as well but the problem lies with the jquery, I think. To make sure that it is not a browser-issue I have tested it in all my browsers with the same behavior.