Having trouble with creation of crossfading image gallery with jQuery .animate() + ie8 compability

Having trouble with making crossfading image gallery on jQuery based on .animate() function - don't know how to fix fadeIn of the next image to make smooth crossfading(with ie8 compability)? https://jsfiddle.net/Vimpil/fqhc1e9m/

$(".min_gal_small_img").click(function(event) {
  var img_data = $(this).data("big-image");
  $(".min_gal_big_img").animate({opacity: "0"},"400");
   $(".min_gal_big_img img").attr({"src": img_data, opacity:"0"},"0");
   $(".min_gal_big_img").animate({opacity: "1"},"400");
});

jQuery.when() function was suited perfectly for it. In ie8 it was working too. https://jsfiddle.net/Vimpil/5abdj39s/

 $(".min_gal_small_img").click(function(event) {

var img_data = $(this).data("big-image");

$.when($(".min_gal_big_img").animate({
  opacity: "0"
  }, "400")).done(function(x) {

  $(".min_gal_big_img img").attr({
    "src": img_data,
    opacity: "0"
  }, "0");

  $(".min_gal_big_img").animate({
    opacity: "1"
  }, "400");
});

});