現在のプロジェクトの1つでは、メニューアイコンに効果を追加したいと考えていました。マウスホバーの瞬間に効果が上がります。 私は、jqueryに組み込まれたアニメーション効果を、反射と影の2種類のアイコンで使用して実験しました。
デモを見る
ダウンロードする
HTMLとCSSはどちらも非常にシンプルで、インターネット上の通常のナビゲーションパネルとメニューに似た構造を持っています（トピックを煩雑にしないために、ここの例のHTML / CSSコードは含めませんでしたが、デモまたはダウンロードしたファイルで確認できます-リンク以下）。
つまり、JSを使用して、各<li>要素に反射/影を追加します。 次に、アニメーション効果で位置を変更し、マウスホバー時にメニューからこれらの追加要素とアイコン自体の透明度も変更します。
.stop（）を追加して、ナビゲーションバーのあちこちでマウスをすばやく動かした場合にイベントキューが作成されないようにしました。
// Begin jQuery
$( document ).ready( function () {
/* =Reflection Nav
-------------------------------------------------------------------------- */
// Append span to each LI to add reflection
$( "#nav-reflection li" ).append( "<span></span>" );
// Animate buttons, move reflection and fade
$( "#nav-reflection a" ).hover( function () {
$( this ).stop().animate({ marginTop: "-10px" }, 200);
$( this ).parent().find( "span" ).stop().animate({ marginTop: "18px" , opacity: 0.25 }, 200);
}, function (){
$( this ).stop().animate({ marginTop: "0px" }, 300);
$( this ).parent().find( "span" ).stop().animate({ marginTop: "1px" , opacity: 1 }, 300);
});
/* =Shadow Nav
-------------------------------------------------------------------------- */
// Append shadow image to each LI
$( "#nav-shadow li" ).append( '<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />' );
// Animate buttons, shrink and fade shadow
$( "#nav-shadow li" ).hover( function () {
var e = this ;
$(e).find( "a" ).stop().animate({ marginTop: "-14px" }, 250, function () {
$(e).find( "a" ).animate({ marginTop: "-10px" }, 250);
});
$(e).find( "img.shadow" ).stop().animate({ width: "80%" , height: "20px" , marginLeft: "8px" , opacity: 0.25 }, 250);
}, function (){
var e = this ;
$(e).find( "a" ).stop().animate({ marginTop: "4px" }, 250, function () {
$(e).find( "a" ).animate({ marginTop: "0px" }, 250);
});
$(e).find( "img.shadow" ).stop().animate({ width: "100%" , height: "27px" , marginLeft: "0px" , opacity: 1 }, 250);
});
// End jQuery
});
* This source code was highlighted with Source Code Highlighter .
このクイックデモのために、IE6でのサポートについては気にしなかったという事実に注目します。
PS
この例はjQuery UIを必要とせず、純粋なjQueryでも動作します。 しかし、リンクによるデモとダウンロードするファイルでは- テキスト、背景、境界線、または周囲の色のアニメーションの変更で遊びたい人のためにUIスクリプトを残しました。