https://www.anet-yokyo.jp/js/rolloverf.js

1(function($){
2	$(function() {
3	
4		if(jQuery.support.opacity){
5			
6			var fadeSpeed = 100;
7			var rolloverImg = $('a img');
8			
9			rolloverImg.each(function() {  
10				if(this.src.match('_off')) {  
11    			var imgWidth = $(this).width();
12				  var imgHeight = $(this).height();
13					$(this).parent('a').css( {display: 'inline-block', width: imgWidth, height: imgHeight}); 
14					
15					this.onImgSrc = new Image();
16					this.onImgSrc.src = this.getAttribute('src').replace('_off', '_over');  
17					$(this.onImgSrc).css( {position: 'absolute', opacity: 0} );  
18					$(this).before(this.onImgSrc);
19					
20					$(this.onImgSrc).mousedown(function(){  
21						$(this).stop().animate({opacity: 0}, {duration: fadeSpeed, queue: false});  
22					});  
23			
24					$(this.onImgSrc).hover(
25						function(){ $(this).animate( {opacity: 1}, {duration: fadeSpeed, queue: false}); },
26						function(){ $(this).animate( {opacity: 0}, {duration: fadeSpeed, queue: false}); }
27					);  
28				}  
29			});
30		} else { // IE8-
31			$('a[href] img, input[type="image"]').mouseover(function() {
32				$(this).attr('src', $(this).attr('src').replace('_off', '_over'));
33				$(this).mouseout(function() {
34					$(this).attr('src', $(this).attr('src').replace('_over', '_off'));
35				});
36			});
37		}
38
39	});
40})(jQuery);