https://www.sevenbells.jp/common/js/lib/jquery.rolloverFade.js

1/**
2 ***********************************************
3 * 
4 * ホバーでフェードするアニメーション
5 * _off, _on の画像を用意
6 * @category 	Application of AZLINK.
7 * @author 		Norio Murata <[email protected]>
8 * @copyright 	2010- AZLINK. <http://www.azlink.jp>
9 * @final 		2013.03.15
10 * 
11 ***********************************************
12 */
13(function($) {
14	
15	$.fn.extend({
16		
17		rolloverFade: function(config) {
18			
19			var defaults={
20				durationOver: 300, 
21				durationOut: 200
22			};
23			
24			var options=$.extend(defaults, config);
25			
26			return this.each(function(i) {
27				if ($.support.opacity) {
28					if (this.src.match('_off')) {
29						this.rollOverImg=new Image();
30						this.rollOverImg.src=this.getAttribute('src').replace('_off', '_on');
31						$(this.rollOverImg).css({
32							position: 'absolute', 
33							opacity: 0
34						});
35						$(this).before(this.rollOverImg);
36						
37						$(this.rollOverImg).hover(function(){
38							$(this).stop().animate({
39								opacity: 1
40							}, {
41								duration: defaults.durationOver, 
42								queue: false
43							});
44						}, function(){
45							$(this).stop().animate({
46								opacity: 0
47							}, {
48								duration: defaults.durationOut, 
49								queue: false
50							});
51						});
52					}
53				} else {
54					$(this).hover(function() {
55						var imgSrcOver=$(this).attr('src').replace('_off', '_on');
56						$(this).attr('src', imgSrcOver);
57					}, function() {
58						var imgSrcOut=$(this).attr('src').replace('_on', '_off');
59						$(this).attr('src', imgSrcOut);
60					});
61				}
62			});
63		}
64		
65	});
66	
67}(jQuery))