Flash-like menu effect code implemented by jQuery_jquery

Let’s take a look at the effect first: http://demo.jb51.net/js/jquery_flash/demo.htm

Because the following menu has the same implementation principle as the above logo, in order to simplify For the sake of safety, here we only use the code of the logo part to illustrate the principle:

HTML code:

Copy code The code is as follows:

Logo Type

CSS code:

Copy code The code is as follows:

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;
}

There is a .hover class here, which is not found in the html. Don’t worry, this is at the back Will be used in js.

JS code:

Copy code The code is as follows:

$(function () { var fadeSpeed ​​= ($.browser.safari ? 600 : 450); $('#logotype').append(''); $(' .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('' );
$('.hover').css('opacity', 0);
$('.hover').parent().hover(function() {
$('. hover', this).stop().animate({
'opacity': 1
},
fadeSpeed)
},
function() {
$('. hover', this).stop().animate({
'opacity': 0
},
fadeSpeed)
});
});

This JS clearly describes the implementation principle of this effect: first create a span with class hover in the link (this span is the real-life effect when the mouse is placed on the link), and set its transparency is 0, and then when the mouse moves over the connection, the transparency of the span is gradually adjusted to 1, so that the above span will overwrite the default effect of a, thus achieving our animation effect.

Flash-like menu effect based on jQuery