jQuery元素的位置在播放和停止动画后重置

jQuery Element position is reset after show and stop animation

本文关键字：动画 元素 位置 播放 jQuery      更新时间：2023-09-26

我使用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

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

jQuery UI的.show()和.hide()设置左侧的CSS值有时和混乱的定位。我偶然发现了这个答案，建议只使用.animate()并明确地为动画设置顶部CSS值。这就解决了问题。

小提琴

相关文章：