Wilq32.RotateImage

Canvas機能を使用し、画像を回転表示させるスクリプト
jqueryrotate
なんでか動かない!ので、こっち使います。

$(function(){
	$('#rotate1').rotate(-25);
	var rotImage = $("#rotate2").rotate({
		bind :[
			{"mouseover":function(){rotImage[0].rotateAnimation(85);}},
			{"mouseout":function(){rotImage[0].rotateAnimation(-85);}}
		]
	});
});
<img src="images/common/sNav1.png" id="rotate1">
<img src="images/common/sNav1.png" id="rotate2">

1つ目(L2)が初めから傾いた状態で表示、
2つ目(L3~L8)がアニメーションで表示しています。

ロールオーバーに使うとおされ_( :3」∠)_

jQuery Blend

ボタンのロールオーバーでふわっと画像が切り替わるあれ
CSS Spriteなどであらかじめオーバー前と後の画像を準備しているのであればblendが簡単です。
CSSの:hoverの記述の部分をコピーし、:hoverを.hoverに変えたものを追記
ヘッタでblendを読み込んだあと、下記のようにセレクタで指定してください。

$('selector1,selector2').css('cursor','hand').blend();

blendを追加するだけだとボタンをマウスオーバーした際にマウスの形状が変化しません。
ので、cssにて指定します。

それ以外、たとえば一枚の画像をフェードさせたいだけの場合には・・・

$('img.fade,a.fade img,.fade a img').hover(function() {
	$(this).stop().fadeTo(500,0.7);
}, function() {
	$(this).stop().fadeTo(500,1);
});

JSに上記の記述をしておき、フェードさせたい要素にfadeのクラスを指定すればOK

<div><a><img class="fade"></a></div>

直接imgに指定しても、aタグに指定しても、更にその親要素に指定してもfadeがかかります。

また、ギャラリーなどで写真をマウスオーバーしたら、その写真以外がすべて半透明化するようなサイトなどではsiglings(兄弟要素)を指定します。

$('selector').children().hover(function() {
	$(this).siblings().stop().fadeTo(500,0.3);
}, function() {
	$(this).siblings().stop().fadeTo(500,1);
});

.children()が子要素、.siblings()が兄弟要素、簡単な相関図で書くと下図のようになります。

背景が濃いグレーのliを選択しているときのそれぞれの関係です。
特定のタグのみを指定したい場合には(‘a’)のように、括弧内に記述する事も可能です。
直前の親要素をさす場合、parentよりclosestの方が使い易いかもめ_( :3」∠)_

複雑なコーディングでなければ指定も楽ですが、CMSを導入している場合には融通が利かない事も多いです