Elastic Thumbnail Menu


Description: 画像にマウスオーバーするとアニメーションしながら拡大します。サムネイルにインパクトを与えたり、メニューとしても使えそうです。MacのDockライクなUIの実装にも良さそうです。
Sample: demo
Tutorial: Elastic Thumbnail Menu
License: -

Note

$(document).ready(function(){
	$('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

	$('.menuitem').mouseover(function(){ //When mouse over menu item

		gridimage = $(this).find('img'); //Define target as a variable
		gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

	}).mouseout(function(){ //When mouse no longer over menu item

		gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

	});
});

画像にclassを与えて指定します。

Related snippet :

  • Description: マウスオーバーでストンとキャプションが落ちるメニューを実装するプラグインです。エフェクトが可愛いですね。実装にはjquery.easingが使われて ...
  • Description: クールなエフェクトのフライアウトメニューです。css3も併用しています。要jquery.easingです。 Sample: demo ...
  • Description: Appleのスライドショーのようなギャラリーを構築するチュートリアルです。デモではcss3と、IE7のハックを用いているので汎用的とは言えませんが、 ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: マウスを乗せるとアイコンが回転しながら開き、コンテンツを表示するメニューを実装します。IEでは回転はしませんが、開閉は可能です。 Samp ...
  • Description: タブをページ推移無しで切り替えるプラグインです。切替時にも、縦にスライドするアニメーションが施されています。サイドバーなどで重宝しそう。 ...