ajax设置offset,javascript - jQuery: offset() animation and ajax - Stack Overflow

I'm having a little problem with jQuery ajax and an animation.

I have a layout with a menu that call my page and when loaded, provide a little animation with jQuery easing

Here's my ajax.js

$(document).ready(function() {

// Ajax request

$(".transition").click(function() {

page = ( $(this).attr("id") );

$.ajax({

type: "GET",

url: page,

data: "ajax=true",

cache: false,

success: function(html) {

afficher(html);

},

error: function(XMLHttpRequest,textStatus,errorThrows) {

// Erreur durant la requête

}

});

});

function afficher(donnees) {

$(".step").empty();

$(".step").append(donnees);

// Animate

var step_position = $(".step").offset();

$(".step").offset({ top: step_position.top, left: step_position.left - 1000 });

$(".step").animate({

"left": '+=1000',

}, 750, 'easeOutBack');

}

});

If a user clicks, everything work great.

But if:

A user double clicks on the same link

A user clicks fast on several links

then the loaded data goes out of the page.

I know there's a problem with the fact that I work with asynchronous data and that I ask for the offset at a precise time. I tried to put constant as parameters (instead of doing var step_position = $(".step").offset(); ) but that didn't work.

How should I do for always displaying my data correctly, no matter how many ajax calls are made?