Question

I have a simple animation the problem is I want the animation to end before I can click again?

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

 $('#result').animate({
    left: '-=250',
   }, 1000, function() {
  pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

Answer 1

The answer is simple, use the .data() method to set a clickable flag on the item. You can re-enable it in your complete function.

From jQuery.com: .data() Documentation

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

We can set several distinct values for a single element and retrieve them later:

Using the complete method on your animation (Which you’re already using to show/hide your next / previous buttons, we can re-enable the button to be clicked.

Note that we store $(this) into btn so it can be accessed from the closure of the complete function.

$(".next").click(function() {
  var btn = $(this);
  if (btn.data('running'))
    return;

  btn.data('running', true);

  $('#result').animate({
    left: '-=250',
    }, 1000, function() {
       pos = $('#result').position();

       if (pos.left <= -550) {
         $('.next').hide();
       }
       if (pos.left <= -250) {
         $('.prev').show();
       }

       // Unset it here, this lets the button be clickable again
       btn.data('running', false);
    }
   );
});