CODEWITHSUNDEEP
jquery
user520300
user520300

Reputation: 1527

Ease transition when changing image source

I have an image that I want to swap out but I'd like to animate or fade in / fade out the transition so its not a hard swap. How can I make the transition ease?

HTML

<div class="workSample"><a href="various.html"><img class="img" src="images/various.png" alt="Various" style="width:100%"></a></div>

and the Javascript

$('.img').hover(function(){
    $(this).data('on',
        $(this).attr('src')).attr('src', $(this).data('on').replace(/(\.\w+)$/, "_roll$1")
    );
},function(){
    $(this).attr('src', $(this).data('on'));
});

Upvotes: 0

Views: 236

Answers (1)

saluce
saluce

Reputation: 13360

Use .animate() and alter the opacity of the img, then perform the swap, then .animate() to restore the original opacity.

Use the animate callback to perform the swap and re-animate to bring back into view, that way you can guarantee that the image is fully transparent before swapping.

Upvotes: 1

Related Questions