When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets.
function displayMessage(msg) {
var $messageEl = $('#userActMenuStatus');
if ($messageEl.length == 0) {
$messageEl = $('<span id="userActMenuStatus">' + msg + '</span>');
$('#app_nav').append($statusEl);
$messageEl.position({
my: "right center",
at: "left center",
of: $('#userActMenu'),
collision: "fit"
}).css('left', parseInt($messageEl.css('left')) - 10);
} else {
$messageEl.html(msg);
}
}
$('#button1').click(function () {
displayMessage('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');
});
});
What could be causing this issue?
Please note that I am restricted to using jQuery v1.5.2 and jQuery UI 1.8.12