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值，并且会影响定位。我偶然发现了answer，建议只使用.animate()并为动画明确设置顶部CSS值。这解决了这个问题。

Fiddle

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

2 个答案: