NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

画像ボタンをフェードイン・フェードアウトでロールオーバーさせる

2013年12月13日jQueryのみでつくるギミック

画像ボタンをフェードイン・フェードアウトでロールオーバーさせる

リンクが貼られた画像のボタンをフェードイン・アウトでロールオーバーさせます。IE8以下に関してはパキッと切り替わります。

デモページ

JavaScript

(function($){
	$(function() {
	
		if(jQuery.support.opacity){
			
			var fadeSpeed = 400;
			var rolloverImg = $('a img');
			
			rolloverImg.each(function() {  
				if(this.src.match('_off')) {  
    			var imgWidth = $(this).width();
				  var imgHeight = $(this).height();
					$(this).parent('a').css( {display: 'inline-block', width: imgWidth, height: imgHeight}); 
					
					this.onImgSrc = new Image();
					this.onImgSrc.src = this.getAttribute('src').replace('_off', '_on');  
					$(this.onImgSrc).css( {position: 'absolute', opacity: 0} );  
					$(this).before(this.onImgSrc);
					
					$(this.onImgSrc).mousedown(function(){  
						$(this).stop().animate({opacity: 0}, {duration: fadeSpeed, queue: false});  
					});  
			
					$(this.onImgSrc).hover(
						function(){ $(this).animate( {opacity: 1}, {duration: fadeSpeed, queue: false}); },
						function(){ $(this).animate( {opacity: 0}, {duration: fadeSpeed, queue: false}); }
					);  
				}  
			});
		} else { // IE8-
			$('a[href] img, input[type="image"]').mouseover(function() {
				$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
				$(this).mouseout(function() {
					$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
				});
			});
		}

	});
})(jQuery);

参考サイト

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 画像ボタンをフェードイン・フェードアウトでロールオーバーさせる

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com