fadeOut then fadeIn sequentially

I'm trying to fade out one image, then fade in another image in the same spot.

So far I've got this fiddle, but you can see it changes the image before the .fadeOut() function finishes, when changing image via clicking thumbs. I've read that jQuery doesn't run sequentially as standard (which my code is assuming it does), so I tried adding in the completed function, like so:

$('#image').fadeOut('fast', function() {
    $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>');
    $('#image').fadeIn('fast');
});

However my issue is still present. What should I do to fix this?

Solution

I wouldn't destroy and recreate the elements; I'd just update the attributes. I'd also include a .stop(true, true) to cancel any previous animation and jump straight to the end before starting the fadeout, in case someone clicks quickly.

var images = [
  'https://i.sstatic.net/uClcV.jpg?s=328&g=1',
  'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
  'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);

function updateImage(image, title) {
  var img = $('#image');
  img.stop(true, true).fadeOut('fast', function() {
    img.find('a').attr('href', image).attr('title', title);
    img.find('img').attr('src', image);
    img.fadeIn('fast');
  });
}

$("#next").click(function() {
  current = (current + 1) % images.length;
  updateImage(images[current], images[current]);
});

<input type="button" id="next" value="Next">
<div id="image">
  <a>
    <img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>