jquery simulation Perfect to achieve the classic flash navigation animation effect "with demo source download" _jquery

This article illustrates the method of jquery simulation to realize the effect of classic flash navigation animation. Share to everyone for your reference, specific as follows:

First, the foreword:

Flash was very hot in the early days of China's Internet development, a variety of vector modeling and movements, coupled with specially formulated sound effects, so that many people in front of a bright, and let a lot of people fascinated by this emerging media, when the rise of a lot of large and small websites dedicated to release Flash, the impression that remember the like " Flash Flash bar, "Flash Empire", "Flash guest heaven and earth" and these are very hot sites, at that time flourished, resulting in a large number of specialized in flash developers, we call the fashion "flash". Do you think of some animated cartoons of the kind of habit of using the sword of the swordsman?

I remember the more famous is the "Little Broken Child" series of animation, in addition to the "Deer Ding", "Dahua West Tour", "The People's margin Q biography" and other series of very exquisite animation, in my puppy-time, have bought a CD-ROM looked and collected up, but also bought a lot of flash produced books to learn, Hope that one day can make a decent work, but so far did not make a decent work, at most can only do some pictures and text version of the MV, ashamed Ah. It can be said that flash at that time basically reached the peak period.

Since then, the network began to enter the era of WEB2.0, due to the rapid pace of modern social work, flash update slow, the development of a long period of time, new technologies and applications continue to emerge, as well as some of the Pure Flash publishing site non-profit and network transmission, etc. bring a series of problems, Glorious flash began to decline, and no longer return to the glorious period of the year. Although Macromedia was eventually acquired by Adobe in 2005 and unveiled a new version and a 3.0 as, there is no way to undo the slide.

Today, the market share is far from the peak of the year, but there are still a lot of people in the tireless research and use of this once brought us so many dreams and beautiful flash, there are still many excellent works in circulation, whether the apple give up support Flash, or under the new technology, Flash will exit the stage later, but we have a deep respect for flash.

Haha, seems to pull far, back to the point.

Second, the topic

After the birth of the new HTML5 and CSS3, it was predicted that flash would be replaced by these new technologies, which I think is not likely to be the same, in different directions, at least not at this point in time.

As a front siege lion, in our web development, the use of flash to try to use as little as possible, such as some flash web site or navigation or other elements of the page, because the Flash search engine unfriendly, search engine can not crawl inside the content, so in our general development, In particular, large or portal Web site development does not use Flash, but flash with its special swimming animation effect will still attract a large number of people to use it to do site whole station or some effect.

In some projects, the customer asks for a flash effect on a site to navigate, the only reason is to think that the animation is good-looking, but for us, the front siege lions, code crazy, one is not to do flash, the second is to direct others to take down the flash is not appropriate, because others are targeted at the project to develop, There are a lot of as is associated with the project, so also take down also can not use, three is SEO or code neat, like toss, always want to through other various methods to achieve, have not toss to death will not be satisfied with the mentality, so there is the following such a toss-- JS simulation of the flash navigation effect toss.

To toss the effect of the following figure:

The specific effect please see demo, Click here to open .

Like this flash navigation in the demo, inside in addition to some of the conditions of the judge, there are XML script configuration, there is no solid as knowledge, want to transform over are very difficult, ha, still inferior to the brittle direct simulation to do the effect, and included to be better than Flash.

Want to try to use HTML5 and CSS3 should be able to achieve, but think, browser compatibility is a very big problem, because HTML5 and CSS3 project use less, also compare vegetables, so or JS, but JS itself is also very dish, jquery slightly understand some, Directly with jquery to do, and so on after the perfect browser support HTML3 and CSS3 or I have free time, and then to write again this effect ha.

Say to do, do it, first of all to think about the idea.

This is divided into two parts, above is the big classification, below is the two class classification, the animation is one upward, one downward, the animation utilizes the animate in jquery to be possible, the mouse moves up and moves out is a hover event to trigger, basically involves these two functions, Some of the other small places in the actual process of the details of the adjustment can be.

So there is the following core jquery based script (this code is a bit long, in fact, nothing special, and we usually write the same as the basic, HTML and CSS to the demo page to see, because there is no use of pictures posted out)

$ ("#nav >li>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' BG ' ></span
> '); $ ("#nav >li>a"). each (the function () {$ (' <span class= "over" ><strong> ' + $ (this). Text () + ' </strong
></span> '). Appendto (this);
}); $ ("#nav >li>a:not ('. Cur ')"). Hover (function () {$ (. Out, this). Stop (). Animate ({' Top ': ' 65px '},250);//Slide down-Hide $ (". Over", which). Stop (). Animate ({' top ': ' 0px '},250); Slide down-Show $ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide down-show}, function () {$ (. Out, this). Stop (). Animate ({' top ': ' 0px '},250);//Slide Up-show $ (". Over", this). Stop (). Ani Mate ({' top ': ' 65px '},250); Slide Up-Hide $ (". BG", this). Stop (). Animate ({' Top ': ' 65px '},120);
Slide up-hide});
  $ ("#nav >li:not (': A '): Not (': Last ')"). Hover (function () {$ (". Navbg"). Stop (). Animate ({' Height ': ' 44px '},120);
$ (this). Children (". Snav"). Stop (True). css ({' Left ':-$ (this). Position (). The function () {$ (". Navbg"). Stop (). Animate ({' Height ': ' 0px '},120);
$ (this). Children (". Snav"). Stop (true). Hide ();
}); $ (". Snav>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' bg ' ></span> '
);
$ (". Snav>a"). each (function () {$ (' <span class= "over" > ' + $ (). Text () + ' </span> '). Appendto (this);
}); $ (". Snav>a:not ('. Cur ')"). Hover (function () {$ (. Out, this). the stop (). Animate ({' Top ': ' -44px '},250);//Slide Up-Hide $ (". O Ver ", this). Stop (). Animate ({' top ': ' 0px '},250); Slide Up-Show $ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide Up-show}, function () {$ (. Out, this). Stop (). Animate ({' top ': ' 0px '},250);//Slide down-show $ (". Over", this). Stop (). Ani Mate ({' top ': ' -44px '},250); Slide down-Hide $ (". BG", this). Stop (). Animate ({' Top ': ' -44px '},120);

 Slide down-hide});

Third, the conclusion

Although the effect of simulation and the effect of using Flash has a certain gap, personally feel that the effect can reach about 80% of the flash, but basically little impact, and conducive to SEO, and the speed of loading is obviously faster than flash loading, so the individual feel that can be accepted, but sometimes the customer is accepted, We need some communication.

In general, both Flash and analog have their advantages and disadvantages, which are different in various environments, there is no good and bad saying, only to see the needs and trade-offs, sometimes, customers need to do so, you have to do so, customers are always God, technology these things in some people's eyes is a lump of ha, But for me some of the code for the Lang of the pseudo program ape, although there are technical complex in the inside, for some customer demand also helpless, can make us happy is the process of tossing and realizing the joy and sharing. Do you think so?

Full Demo Instance code click here to download the site .

PS: This article on the basis of the author of the demo to do a large number of simplified and provide a demo source download, in order to direct the most core part of the show to the reader. ）

More interested readers of jquery-related content can view the site topics: "jquery window Operation tips Summary", "jquery drag and drop effects and tips summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery Table" ( Table) Summary of operations tips, jquery Extended techniques Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.