Image rollover with preload and fade effect

rollover_fade.htm

<a href="#">
    <img src="http://dummyimage.com/254x403/ccc/000.jpg&amp;text=254x403+-+Produkt" data-hover="http://dummyimage.com/254x403/999/000.jpg&amp;text=254x403+-+Produkt" alt="" />
</a>

rollover_fade.js

$('img[data-hover]').each(
    function() {
        var img = $(this);
        
        // preload hover image
        $('<img />').attr( 'src', img.attr('data-hover') );
        
        img.parent().hover(
            function() {
                $('<img />')
                .attr( 'src', img.data('hover') )
                .css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    display: 'none'
                })
                .appendTo(
                    $(this).css({
                        position: 'relative',
                        display: 'inline-block'
                    })
                )
                .fadeIn(200);
            },
            function() {
                $(this).children('img').not(':first-child').fadeOut(200,
                    function() {
                        //$(this).remove();
                        // the remove-method works, but the more complicated solution works better with fast mouse movings
                        
                        $(this).parent().children('img').not(':first-child').remove();
                    }
                );
            }
        );
    }
);