先來看看效果：http://demo.jb51.net/js/jquery_flash/demo.htm
因為下面的menu和上面的logo的實現原理一樣，為了簡化起見，我們這裡只拿logo部分的代碼來說明一下原理：
HTML代碼：
代碼如下:
<a id="logotype" href=""><span>Logo Type</span></a>
CSS代碼：
代碼如下:
a#logotype{ background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; } a#logotype span{display:none} a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; } a#logotype{
background: url(logotype.jpg) no-repeat top left;
display: block;
position: relative;
height: 70px;
width: 119px;
}
a#logotype span{display:none}
a#logotype .hover {
background: url(logotype.jpg) no-repeat bottom left;
display: block;
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 119px;
}
這裡有一個.hover的class，從html中並沒有發現，不要著急，這個在後面的js中會用到。
JS代碼：
代碼如下:
$(function() { var fadeSpeed = ($.browser.safari ? 600 : 450); $('#logotype').append('<span class="hover"></span>'); $('.hover').css('opacity', 0); $('.hover').parent().hover(function() { $('.hover', this).stop().animate({ 'opacity': 1 }, fadeSpeed) }, function() { $('.hover', this).stop().animate({ 'opacity': 0 }, fadeSpeed) }); }); $(function() {
var fadeSpeed = ($.browser.safari ? 600 : 450);
$('#logotype').append('<span class="hover"></span>');
$('.hover').css('opacity', 0);
$('.hover').parent().hover(function() {
$('.hover', this).stop().animate({
'opacity': 1
},
fadeSpeed)
},
function() {
$('.hover', this).stop().animate({
'opacity': 0
},
fadeSpeed)
});
});
這段JS很清楚的描述了該效果的實現原理：首先在鏈接中創建一個class為hover的span（這個span是鼠標放到連接上時的現實效果），並且將其透明度設置為0，然後當鼠標移到連接上時，將該span的透明逐漸調整為1，這樣上面的span就會覆蓋a的默認效果，這樣就實現我們的動畫效果。
基於jQuery實現的仿flash菜單效果