javascript - jquery hover image swap using 2 images in same div -

javascript - jquery hover image swap using 2 images in same div -

i trying utilize shopify platform little commerce site. have bulk of site built on main collection page want have image hover effect front/back of item. html output first , sec item in products listing in div. it's working sort of . want have image fadein on page load , when hovered on fadeout fadein sec image in div, when hover leaves revert original image.

.html

<div class="image"> <a href="{{ product.url | within: collection }}"> <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"class="img-responsive collectionitem"> <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" class="img-responsive collectionitem" style="display:none"/> </a> </div>

.js

$('.collectionitem').hover(function() { $(this).fadeout(); $(this).next('img').stop(true, true).fadein('slow'); }, function() { $(this).next('img').fadeout(); $(this).stop(true, true).fadein('slow'); });

jsfiddle: http://jsfiddle.net/trueblueaussie/49fpx/1/

you need chain fade out , fade in avoid weird results. improve set hover on element hat exist whole time browsers weird things when hover element disappears:

function swapimg($container) { var $image = $container.find('img:visible'); var $image2 = $image.siblings(); $image.stop().fadeout(function(){ $image2.stop().fadein(); }); } $('.image').hover(function () { swapimg($(this)); }, function () { swapimg($(this)); });

javascript jquery html css