JQuery Animate只工作一次

Question

以下代码在http://jsfiddle.net/6LbFB中有效，但在我的localhost中运行时失败，它只会移动到1个位置，任何猜测。

                $('.position').click(function () {
                if ($('#preview-bio').css('display') == 'none')
                    $('#preview-bio').show();
                $('#preview-desc').text($('#user-bio').val());
                if ($(this).prop('id') == 'topleft') {
                    $('#preview-bio').animate({ left: 0 }, "slow")
                    .animate({ top: 0 }, "slow");
                }
                else if ($(this).prop('id') == 'bottomleft') {
                    $('#preview-bio').animate({ left: 0 }, "slow")
                    .animate({ bottom: 0 }, "slow");
                }
                else if ($(this).prop('id') == 'topright') {
                    $('#preview-bio').animate({ right: 0 }, "slow")
                    .animate({ top: 0 }, "slow");
                }
                else if ($(this).prop('id') == 'bottomright') {
                    $('#preview-bio').animate({ right: 0 }, "slow")
                    .animate({ bottom: 0 }, "slow");
                }
                if ($('#fixed').prop('checked') == 'checked') {
                    $('#preview-bio').prop('position', 'fixed');
                }
               // $('#preview-desc').fitText();
            });

更新7：27-1358

我查看了其他各种帖子，问题似乎是随后的动画位置（左/右/上/下）需要按比例递增或递减。这是我的猜测

更新7：27-1508

这可能对某人有帮助，我解决了问题，动画有相对位置的作品因此无法从（顶部：0，左：0）移动到（底部：0，左：0）而不是像（顶部： 200，left：0）已经从上到下移动了，实际上还有其他帖子（在stackoverflow中）就这些问题帮我解决了这个问题。可以在http://jsfiddle.net/6LbFB/3/

查看

新代码如下所示

              $('.position').click(function () {
                if ($('#preview-bio').css('display') == 'none')
                    $('#preview-bio').show();
                $('#preview-desc').text($('#user-bio').val());
                if ($(this).prop('id') == 'topleft') {
                    $('#preview-bio').animate({ left: '0' }).animate({top:'0'});
                }
                else if ($(this).prop('id') == 'bottomleft') {
                    $('#preview-bio').animate({ left: '0' }).animate({ top: '300' });
                }
                else if ($(this).prop('id') == 'topright') {
                    $('#preview-bio').animate({ left: '410' }, "slow")
                    .animate({ top: 0 }, "slow");
                }
                else if ($(this).prop('id') == 'bottomright') {
                    $('#preview-bio').animate({ left: '410' }, "slow")
                    .animate({ top: '300' }, "slow");
                }
                if ($('#fixed').prop('checked') == 'checked') {
                    $('#preview-bio').prop('position', 'fixed');
                }
                //$('#preview-desc').fitText();
            });