https://www.plumkoubou.co.jp/scure/js/smoothRollOver.js

1/*
2======== table of content. =================================
3
4Description: fadein/out button image when mouse overed.
5Update:  2010/07/1-
6Author:  Japan Electronic Industrial Arts Co.Ltd.
7         http://www.jeia.co.jp/
8License: licensed under the MIT (MIT-LICENSE.txt) license.
9Using:   using jQuery
10         http://jquery.com/
11         using DD_belatedPNG for IE6-8
12         http://www.dillerdesign.com/experiment/DD_belatedPNG/
13
14============================================================
15*/
16
17new function() {
18	
19	var fadeInTime = 350;	// msec
20	var fadeOutTime = 300;	// msec
21	var offClass = 'off';
22	var onClass = 'on';
23	
24	if ( typeof jQuery == 'undefined' ) {
25		return;
26	}
27	
28	jQuery(document).ready( function() {
29		init();
30	});
31	
32	/**
33	 * initialize
34	 */
35	function init() {
36		
37		jQuery( 'a img' ).each( function() {
38			
39			var src = jQuery(this).attr( 'src' );
40			var fadePatern = new RegExp( /.*_off\.[^.]+/ );
41			var pngPatern = new RegExp( /.*\.png$/ );
42			var onImage;
43			
44			if ( src.match( fadePatern ) ) {
45				onImage = jQuery(this).clone();
46				onImage.
47					attr( 'src', src.replace( '_off.', '_on.' ) ).
48					addClass( onClass ).
49					fadeTo( 0, 0 ).
50					css({
51						'position': 'absolute',
52						'left': '0px',
53						'top': '0px'
54					});
55				
56				jQuery(this).
57					addClass( offClass ).
58					css({
59						'position': 'absolute',
60						'left': '0px',
61						'top': '0px'
62					}).
63					parent().
64						append( onImage ).
65						mouseover( onMouseOver ).
66						mouseout( onMouseOut ).
67						css({
68							'display': 'block',
69							'position': 'relative'
70						}).
71						width( jQuery(this).width() ).
72						height( jQuery(this).height() );
73				
74				if ( typeof( DD_belatedPNG ) != 'undefined' ) {
75					if ( src.match( pngPatern ) ) {
76						DD_belatedPNG.fixPng( this );
77						DD_belatedPNG.fixPng( onImage.get(0) );
78					}
79				}
80			}
81		});
82	}
83	
84	
85	/**
86	 * mouseover event( fadein )
87	 */
88	function onMouseOver( e ) {
89		
90		var src = jQuery(this).children( 'img.' + offClass ).attr( 'src' );
91		var pngPatern = new RegExp( /.*\.png$/ );
92		
93		jQuery(this).unbind( 'mouseover', onMouseOver );
94		
95		if ( src.match( pngPatern ) ) {
96			jQuery(this).
97				children( 'img.' + offClass ).
98					fadeTo( fadeInTime, 0 ).
99				end().
100				children( 'img.' + onClass ).
101					fadeTo( fadeInTime, 1, function(){
102						jQuery(this).parent().mouseover( onMouseOver );
103					});
104		}
105		else {
106			jQuery(this).
107				children( 'img.' + onClass ).
108					fadeTo( fadeInTime, 1, function(){
109						jQuery(this).parent().mouseover( onMouseOver );
110					});
111		}
112	}
113	
114	/**
115	 * mouseout event( fadeout )
116	 */
117	function onMouseOut( e ) {
118		
119		var src = jQuery(this).children( 'img.' + offClass ).attr( 'src' );
120		var pngPatern = new RegExp( /.*\.png$/ );
121		
122		if ( src.match( pngPatern ) ) {
123			jQuery(this).
124				children( 'img.' + offClass ).
125					fadeTo( fadeOutTime, 1 ).
126				end().
127				children( 'img.' + onClass ).
128					fadeTo( fadeOutTime, 0 );
129		}
130		else {
131			jQuery(this).
132				children( 'img.' + onClass ).
133					fadeTo( fadeOutTime, 0 );
134		}
135	}
136}