在显示和停止动画后重置jQuery元素的位置

Question

我使用jQuery .position（）定位元素。 但是，在显示动画并在ajax调用后取消动画之后，该元素的位置将重置。

function showStatusMsg(msg) {
    var $statusEl = $('#userActMenuStatus');

    if ($statusEl.length == 0) {
        $statusEl = $('<span id="userActMenuStatus">' + msg + '</span>');

        $('#app_nav').append($statusEl);
        $statusEl.position({
            my: "right center",
            at: "left center",
            of: $('#userActMenu'),
            collision: "fit"
        }).css('left', parseInt($statusEl.css('left')) - 10);

    } else {
        $statusEl.html(msg);
    }

}

$('#button1').click(function () {
    showStatusMsg('saving...');
    $('#userActMenuStatus').stop(true).show('drop', {
        direction: 'up'
    }, 'slow').effect('pulsate', {
        'times': 100
    }, 1500);

    $.ajax({
        type: 'post',
        url: '/echo/json/',
        data: 'save=data'
    }).success(function (result) {
        $('#userActMenuStatus').stop(true).hide('drop', {
            direction: 'up'
        }, 'slow');

    });

});

http://jsfiddle.net/NhdgM/2/

到底是怎么回事？

免责声明：我必须使用jQuery v1.5.2和jQuery UI 1.8.12

Answer 1

您期望position表现如何？ http://api.jquery.com/position/ https://github.com/jquery/jquery/blob/master/src/offset.js#L90

在我看来，这只是一个读者。

Answer 2

jQuery用户界面的.show()和.hide()被设置在次左CSS值和食堂的定位。 我偶然发现了这个答案 ，建议仅使用.animate()并为动画明确设置顶级CSS值。 这解决了问题。

小提琴