Jquery-implemented flash-like menu effect code

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

Because the menu below is the same as the implementation principle of the logo above, we only take the logo part here for the sake of simplicityCodeThe following principle is explained:

HTML code:Copy codeThe Code is as follows: <a id = "logotype" href = ""> <span> logo type </span> </a>

CSS code:Copy codeThe 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;
}

Here is a. Hover class, which is not found in HTML. Don't worry, it will be used in later Js.

JS Code: copy Code the code is as follows: $ (function () {var fadespeed = ($. browser. safari? 600: 450); $ ('# logotype '). append (' '); expires ('.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 (' ');
certificate ('.hover'}.css ('opacity ', 0);
$ ('. hover '). parent (). hover (function () {
$ ('. hover ', this ). stop (). animate ({
'opacity ': 1
},
fadespeed)
},
function () {
$ ('. hover ', this ). stop (). animate ({
'opacity ': 0
},
fadespeed)
});

This section of JS clearly describes the implementation principle of this effect: first, create a span with class as hover in the Link (this span is the actual effect when the mouse is placed on the connection ), and set its transparency to 0. 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, in this way, we can achieve our animation effect.

Imitation flash menu Effect Based on jquery