Roll Transitions - jpg, png, gif

Easily make an image have a smooth roll over effect by adding _o to the second image to transition into. Then add class fadeJPG, fadeGIF, fadePNG

by vincentieo

HTML

<div style="width: 555px;">

<a href="#">
    <img class="fadeJPG" src="http://vincentstephens.co.uk/projects/files/standard/7/placeholders/green.jpg" />
</a>

<a href="#">
    <img class="fadePNG" src="http://vincentstephens.co.uk/projects/files/standard/7/placeholders/black.png" />
</a>

<a href="#">
    <img class="fadeGIF" src="http://vincentstephens.co.uk/projects/files/standard/7/placeholders/yellow.gif" />
</a>

</div>

CSS

/* No CSS needed */

JavaScript

$('.fadeJPG').each(function() {
    
    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg");
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadeJPG').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

$('.fadePNG').each(function() {
    
    var std = $(this).attr("src");
    var hover = std.replace(".png", "_o.png");
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadePng').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

$('.fadeGIF').each(function() {
    
    var std = $(this).attr("src");
    var hover = std.replace(".gif", "_o.gif");
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadeGIF').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});