javascript - jQuery Element 位置在显示和停止动画后重置

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 UI.show()有时.hide()会设置左侧的 CSS 值并弄乱定位。我偶然发现了这个答案，它建议只.animate()为动画使用并明确设置顶部 CSS 值。这解决了问题。

小提琴