Question

I am working on some functionality for an e-commerce where by a user clicks a products colour, and the previous image of the products fades out while the new product fades, I am trying to achieve a cross fade effect, however I have flicker effect in there which I do not want, I think it comes when I am removing the old image from the dom, here is a fiddle to show you what I trying to do.

http://jsfiddle.net/L9Z5G/

Answer 1

I hope this is what you were looking for: Demo

$('.colours').click(function() {
  if ($('#' + $(this).html().toLowerCase()).attr('class') == 'active') { return; }

  var active = $('.active');
  var next = $('#' + $(this).html().toLowerCase());

  active.fadeOut(500, function() {
    $(this).toggleClass('active');
  });
  next.fadeIn(500, function() {
    $(this).toggleClass('active');
  });
});​