I. Summary
This series of articles will take you into the wonderful world of jquery, with many authors ' specific experiences and solutions, even if you can use jquery to find some cheats in your reading.
The developer has been having pain and animation. But with jquery you will instantly become a master of animation in the eyes of others (those who don't know jquery)! This article describes the animation-related functions of jquery. The original animation is so simple!
Two. Foreword
Examples of this series of articles are for a particular technical detail, because we want to learn is the basic knowledge, although there are always some people want to be more complex application examples, but I think let us first of the foundation, with a solid foundation with everyone's wisdom will be able to create more and better applications.
Just a few days before writing this article, there were more than one colleague who was worried about the "pop-up layer" effect. But later on the face of such a function everyone who has seen this article can smile happily. Jquery,make work easy!
Three. Start with the example
Do Web programs often use a pop-up layer, such as clicking Text or buttons to display a hint of text and so on. Assume the following requirements:
Click the Show hint Text button in the diagram to display a pop-up layer below the button.
Click any blank area or pop-up layer and the pop-up layer disappears.
With primitive JavaScript We can also complete this work. There are a few things to note:
1. The position of the pop-up layer needs to be dynamically computed. Because the object that triggers the pop-up event may appear anywhere on the page, such as the position in the screenshot.
2. For document binding Click is the function to turn off the pop-up layer, to use multicast delegates, or you may flush other people in the document binding functions.
3. After the closed function is bound for document, the event bubbling is required to be canceled in the display function, or the pop-up layer will be turned off immediately after it is displayed.
With jquery, we can easily implement this example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery-start animation</title>
<script type= "Text/javascript" src= ". /scripts/jquery-1.3.2-vsdoc2.js "></script>
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
Animation speed
var speed = 500;
Binding Event Handling
$ ("#btnShow"). Click (Function (Event)
{
Cancel Event Bubbling
Event.stoppropagation ();
Setting the pop-up layer location
var offset = $ (event.target). offset ();
$ ("#divPop"). CSS ({top:offset.top + $ (event.target). Height () + "px", left:offset.left});
Animated display
$ ("#divPop"). Show (speed);
});
Click a blank area to hide the pop-up layer
$ (document). Click (Function (Event) {$ ("#divPop"). Hide (Speed)});
Click the pop-up layer to hide itself
$ ("#divPop"). Click (Function (Event) {$ ("#divPop"). Hide (Speed)});
});
</script>
<body>
<div>
<br/><br/><br/>
<button id= "Btnshow" > Display hint text </button>
</div>
<!--pop-up layer-->
<div id= "Divpop" style= "Background-color: #f0f0f0; Border:solid 1px #000000; Position:absolute; Display:none;
width:300px; height:100px; " >
<div style= "Text-align:center;" > Pop-up layer </div>
</div>
</body>
In addition to achieving the basic display and hide features, now show and hide the pop-up layer is a gradient animation effect! The animation function of jquery is so simple that the first time I used it in my project I was pleasantly surprised. I've been computing positions across browsers for headaches, but with the offset () function and the height () function of jquery, The position of the pop-up layer can be calculated accurately. These functions are encapsulated and cross-browser. Need to be aware of when setting the pop-up layer position attribute, plus "px", otherwise in Firefox under easy to appear problems.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
