1

I find a jQuery image swap script and I use it this way:

Html:

<a href="#" class="product-catalog-thumb">
  <img class="img-responsive" src="005.jpg" data-alt-src="005-2.jpg" >
  <h2>Sterling Silver Pendants</h2>
</a>

js:

//Image Swap on hoover
var sourceSwap = function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$('img[data-alt-src]').each(function() {
    new Image().src = $(this).data('alt-src');
});

$(".product-catalog-thumb").hover(sourceSwap, sourceSwap);

and it works fine. Can anyone help me to add fade effect to this code, I want to fade images into another in swap process.

Emad.N
  • 11
  • 3
  • http://stackoverflow.com/questions/3942727/javascript-fade-image-in-and-out – jonny Sep 02 '15 at 15:35
  • You know that you can add fade effects using `fadeIn()` and `fadeOut()`, right? – Jon Kantner Sep 02 '15 at 19:08
  • Yeah I know fadeIn() and fadeOut(); but I coundn't figure how to add properly and when I add those , image blink twice or hide for good and I don't get it right – Emad.N Sep 02 '15 at 20:53

0 Answers0