javascript - fadeOut then fadeIn sequentially -

i'm trying fade out 1 image, fade in image in same spot.

so far i've got fiddle, can see changes image before .fadeout() function finishes, when changing image via clicking thumbs. i've read jquery doesn't run sequentially standard (which code assuming does), tried adding in completed function, 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 issue still present. should fix this?

i wouldn't destroy , recreate elements; i'd update attributes. i'd include .stop(true, true) cancel previous animation , jump straight end before starting fadeout, in case clicks quickly.

var images = [    'http://i.stack.imgur.com/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 that, demo, it's okay -->    </a>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>