Shulou(Shulou.com)06/02 Report--

JQuery how to make the page move, for this question, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Just a few days before writing this article, more than one colleague was worried about the pop-up layer effect. But in the future, facing this function, everyone who has read this article can smile happily. JQuery, make work easy!

one。 Start with an example

Web programs often use pop-up layers, such as clicking text or buttons to display a prompt text. Suppose you have the following requirements:

◆ clicks the Show prompt text button in the figure to display a pop-up layer below the button.

◆ clicks any empty area or pop-up layer, and the pop-up layer disappears.

We can also finish the job with the original javascript. There are the following points to note:

1. The position of the pop-up layer needs to be calculated dynamically. Because the object that triggered the pop-up event may appear anywhere on the page, such as in the screenshot.

two。 Click for document binding is a function that closes the pop-up layer and uses a multicast delegate, otherwise it may flush out other people's functions bound in document.

3. After binding the close function for document, you need to cancel the event bubbling in the display function, otherwise the pop-up layer will be closed immediately after it is displayed.

With jQuery, we can easily implement this example:

JQuery-Start Animation $(document) .ready (function () {/ / Animation Speed var speed = 500 / / bind event handling $("# btnShow") .click (function (event) {/ / cancel event bubbling event.stopPropagation (); / / set 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 the empty 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)});}) Show prompt text pop-up layer

In addition to achieving the basic show and hide functions, now showing and hiding pop-up layers is a gradient animation effect! The animation function of jQuery is so simple that it surprised me when I used it in the project. I used to have a headache about calculating locations across browsers, but through jQuery's offset () function and height () function, I can accurately calculate the location of the pop-up layer. These functions are encapsulated and cross-browser. You need to be careful to add "px" when setting the pop-up layer location property, otherwise it is prone to problems under FireFox.

The animation functions of jQuery are mainly divided into three categories:

1. Basic animation function: both transparency gradient and sliding effect. Is the most commonly used animation effect function.

two。 Slide animation function: use only the sliding gradient effect.

3. Fade in and out animation function: use only the transparency gradient effect.

The effects of these three kinds of animation functions are different and the usage is basically the same. You can try it yourself.

In addition, maybe none of the above three types of functions are what we want, so jQuery also provides custom animation functions, which let us define the animation effects.

The following three types of built-in animation functions and custom animation functions are explained respectively.

two。 Basic animation function

The show () and hide () used in the above example are the basic animation functions we use most.

Here are the basic animation functions of jQuery:

Basic animation function Basics

Name description example show () shows hidden matching elements.

This is the unanimated version of show (speed, [callback]). If the selected element is visible, this method will not change anything. Whether this element is hidden by the hide () method or if display:none;, is set in CSS, this method will work.

Show all paragraphs:

$("p") .show () show (speed, [callback]) displays all matching elements in an elegant animation and optionally triggers a callback function after the display is complete.

You can dynamically change the height, width, and opacity of each matching element according to the specified speed. In jQuery 1.3, padding and margin will also have animation for smoother effects.

Show the hidden paragraphs in slow animation for 600 milliseconds:

$("p"). Show (600); hide () hides displayed elements

This is the unanimated version of hide (speed, [callback]). If the selected element is hidden, this method will not change anything.

Hide all paragraphs:

$("p") .hide () hide (speed, [callback]) hides all matching elements with elegant animation and optionally triggers a callback function after the display is complete.

You can dynamically change the height, width, and opacity of each matching element according to the specified speed. In jQuery 1.3, padding and margin will also have animation for smoother effects.

Slowly hide the paragraph in 600 milliseconds:

$("p") .hide ("slow"); toggle () toggles the visible state of the element.

Switch to hidden if the element is visible, or visible if the element is hidden.

Toggle the visible state of all paragraphs:

$("p") .toggle () toggle (switch) toggles the visible state of the element based on the switch parameter (ture is visible and false is hidden).

If switch is set to true, the show () method is called to display the matching elements, and if switch is set to false, hide () is called to hide the elements.

Toggle the visible state of all paragraphs:

Var flip = 0

$("button") .click (function () {

("p") .toggle (flip++% 2 = = 0)

Toggle (speed, [callback]) switches all matching elements with elegant animation and optionally triggers a callback function after the display is complete.

You can dynamically change the height, width, and opacity of each matching element according to the specified speed. In jQuery 1.3, padding and margin will also have animation for smoother effects.

Quickly switch the display state of the paragraph in 200 milliseconds, and then a dialog box pops up:

$("p") .toggle ("fast", function () {

Alert ("Animation Done.")

});

1. Use basic animation functions

The basic animation functions are mainly divided into show, hide and toggle. Both provide a parameterless version that does not apply to the display state of animated toggle elements:

$("# divPop"). Show (); $("# divPop"). Hide (); $("# divPop"). Toggle ()

Both provide overloading of the two parameters, because the callback function can be omitted, so you can pass in a numeric value as the only parameter, as used in the opening example, and the element will be animated / hidden within the time specified in the parameter:

$("# divPop"). Show (200); $("# divPop"). Hide ("fast"); $("# divPop"). Toggle ("slow")

If 200 is passed, the layer will be displayed as a gradient within 200 milliseconds. The speed parameter can use a string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the duration of the animation (for example, 1000).

You can pass the callback function callback to all three functions. The signature is as follows:

Function callback () {this; / / dom element}

The this in the callback function is the DOM object that executes this function. It will be executed at the end of the animation.

two。 Use the toggle function

The toggle function is a more powerful function that toggles the visible state of an element. We often encounter situations where we need to use toggle. For example, you want a paragraph of text * to show the pop-up layer, and the second click to hide the pop-up layer.

We can achieve this effect by slightly modifying the opening example:

JQuery Animation-Toggle $(document) .ready (function () {/ / Animation Speed var speed = 500 / / bind event handling $("# btnShow") .click (function (event) {/ / cancel event bubbling event.stopPropagation (); / / set pop-up layer location var offset = $(event.target) .offset () Css ({top: offset.top + $(event.target). Height () + "px", left: offset.left}); / / toggle the display status of pop-up layer $("# divPop") .toggle (speed);}) Prompt text pop-up layer

The toggle () function can pass a Boolean parameter, for example: toogle (true) is equivalent to show (), and toogle (fasle) is equivalent to hide ().

three。 Sliding animation function

The effect of the basic animation function is a function that combines sliding and transparency gradient, and jQuery separately provides related functions with only sliding effects.

Slide animation function Sliding

Name description example slideDown (speed, [callback]) dynamically displays all matching elements by height change (downward increment), optionally triggering a callback function after the display is complete.

This animation only adjusts the height of the elements, so that the matching elements can be displayed in a "sliding" way. In jQuery 1.3, the upper and lower padding and margin will also be animated for smoother effects.

Slowly slide the paragraph down in 600 milliseconds:

$("p") .slideDown ("slow"); slideUp (speed, [callback]) dynamically hides all matching elements by changing height (decreasing upward), optionally triggering a callback function after hiding is complete. Slowly slide the paragraph up in 600 milliseconds:

$("p"). SlideUp ("slow"); slideToggle (speed, [callback]) toggles the visibility of all matching elements through height changes, and optionally triggers a callback function after the switch is complete. Slide the paragraph up or down slowly in 600 milliseconds:

$("p") .slideToggle ("slow")

Explain

SlideDown is the sliding version of show, slideUp is the sliding version of hide, and slideToggle is the sliding version of toggle.

The parameters are exactly the same:

$("# divPop"). SlideDown (200); $("# divPop"). SlideUp ("fast"); $("# divPop"). SlideToggle ("slow")

four。 Fade in and out animation function

The fade-out function only provides the effect of a transparency gradient.

Fade in and out function Fading

Name description example fadeIn (speed, [callback]) realizes the fading effect of all matching elements through changes in opacity, and optionally triggers a callback function after the animation is completed.

This animation only adjusts the opacity of the elements, which means that the height and width of all matching elements will not change.

Slowly fade the paragraph in 600 milliseconds:

$("p"). FadeIn ("slow"); fadeOut (speed, [callback]) fade out all matching elements through changes in opacity, and optionally trigger a callback function after the animation is complete. Slowly fade the paragraph out in 600 milliseconds:

$("p") .fadeOut ("slow"); fadeTo (speed, opacity, [callback]) progressively adjusts the opacity of all matching elements to the specified opacity and optionally triggers a callback function after the animation is complete. Slowly adjust the transparency of the paragraph to 0.66 in 600 milliseconds, about 2 to 3 visibility:

FadeTo ("slow", 0.66); $("p") .fadeTo ("slow", 0.66)

Explain

The fadeIn and fadeOut functions correspond to show and hide and are used to show and hide objects as transparency gradients:

$("# divPop"). FadeIn (200); $("# divPop"). FadeOut ("fast")

The transparency gradient does not have a toggle function.

What needs to be explained in particular is the fadeTo function. This function allows the object to gradient to the specified transparency. The value of opacity parameter is 0-1, for example, 0.6 indicates that the transparency is 60%.

Unlike fadeIn and fadeOut, the fadeTo function only changes the transparency of the object, even if the transparency is zero. While fadeIn and fadeOut*** must change the display property of the object, the object will disappear from the page after fadeOut, but fadeTo just makes it transparent (placeholder).

The fadeTo function can be used with fadeIn. For example, by default, fadeIn*** makes the object fully displayed:

However, if you have previously used fadeTo to set the transparency of the pop-up layer, you can make it translucent:

The core code is as follows:

/ / set the transparency of the pop-up layer $("# divPop"). FadeTo (0,0.66); / / make the pop-up layer show if transparently ($("# divPop"). Css ("display") = = "none") {$("# divPop") .fadeIn (speed);} else {$("# divPop") .fadeOut (speed);}

After setting the pop-up layer transparency with fadeTo, using fadeIn will make the object display and gradient to the transparency set by fadeTo.

What is introduced here is only the characteristics of the two functions, and they do not have to be used together in practical application.

four。 Animation laboratory

The Animation Lab is an example from jQuery, which makes it easy for us to see the effects of the above three animations. The chapter7\ lab.effects.html file for the corresponding source code. The source code is available for download in this article. The screenshot of the lab is as follows:

five。 Custom animation function

The above three gradient animation functions have basically met our daily needs. But if we have to create our own special effects, jQuery also provides us with related functions.

Custom animation function Custom

Name description example animate (params, [duration], [easing], [callback]) functions used to create custom animation.

The key to this function is to specify the animation form and the resulting style property object. Each attribute in this object represents a style property that can be changed (such as "height", "top", or "opacity"). Note: all specified attributes must be in camel form, such as marginLeft instead of margin-left.

The value of each attribute indicates the end of the animation when the style attribute ends. If it is a numeric value, the style property changes from the current value to the specified value. If you are using a string value such as "hide", "show", or "toggle", the default animation form is called for this property.

In jQuery 1.2, you can use em and% units. In addition, in jQuery 1.2, you can make elements move relative to each other by specifying "+ =" or "- =" before the attribute value.

In jQuery 1.3.If duration is set to 0, the animation is done directly. In previous versions, the default animation was performed.

Several different attributes of the div element change together after clicking the button:

/ / apply three types of effects in an animation at the same time

$("# go") .click (function () {

("# block") .animate ({

Width: "90%"

Height: 100%

FontSize: "10em"

BorderWidth: 10

}, 1000)

Animate (params, options) is a function used to create a custom animation.

The key to this function is to specify the animation form and the resulting style property object. Each attribute in this object represents a style property that can be changed (such as "height", "top", or "opacity"). Note: all specified attributes must be in camel form, such as marginLeft instead of margin-left.

The value of each attribute indicates the end of the animation when the style attribute ends. If it is a numeric value, the style property changes from the current value to the specified value. If you are using a string value such as "hide", "show", or "toggle", the default animation form is called for this property.

In jQuery 1.2, you can use em and% units. In addition, in jQuery 1.2, you can make elements move relative to each other by specifying "+ =" or "- =" before the attribute value.

* A button is pressed to show an animation that is not in the queue. Fonts are also being added as div expands to 90%. Once the font has been changed, the animation of the border begins:

$("# go1") .click (function () {$("# block1"). Animate ({width: "90%"}, {queue: false, duration: 5000}) .animate ({fontSize: '10em'}, 1000) .animate ({borderWidth: 5}, 1000);}) $("# go2") .click (function () {$("# block2"). Animate ({width: "90%"}, 1000) .animate ({fontSize: '10em'}, 1000) .animate ({borderWidth: 5}, 1000);})

Stop ([clearQueue], [gotoEnd]) stops all animations running on the specified element.

If there are animations waiting to be executed in the queue (and clearQueue is not set to true), they will be executed immediately

ClearQueue (Boolean): if set to true, clear the queue. You can end the animation immediately.

GotoEnd (Boolean): let the currently executing animation complete immediately, and reset the original style of show and hide, call callback functions, and so on.

Click Go to start the animation, and click Stop to stop at the current location:

/ / start animation

$("# go") .click (function () {

$(".block") .animate ({left:'+ 200px'}, 5000)

});

/ / stop the animation when you click the button

$("# stop") .click (function () {

$(".block") .stop ()

});

Parameter description

1.params (optional)

Type: Options

Description: a collection of style attributes and their values as animation attributes and final values.

Explanation: animate the element's style attribute value from the current value to the value set by params.

2.duration (optional)

Type: String,Number

Description: a string of one of the three predetermined speeds ("slow", "normal", or "fast") or a millisecond value indicating the duration of the animation (e.g. 1000)

Explanation: the longer the animation lasts, the slower it becomes. If omitted, there will be no animation.

3.easing (optional)

Type: String

Description: the name of the erase effect to be used (plug-in support is required). The default jQuery provides "linear" and "swing".

Explanation: in order for the element to gradually achieve the final effect of the params setting, we need to have a function to implement the gradient, which is called the easing function. But what needs to be passed here is only the name of the easing function. Before using it, you need to register the easing function on jQuery.

4.options parameter

Type: Options

Description: a collection of values that contain animation options.

Explanation: the supported attributes are as follows:

◆ duration: same as the duration parameter above

◆ easing: same as the easing parameter above

◆ complete: a function of type Function that is executed when the animation is complete

◆ step: Callback

◆ queue (Boolean): (default: true) set to false to keep this animation out of the animation queue (new in jQuery 1.2)

Explain

Custom animation is an advanced application, and I can't explain it in detail here. Here are two examples to give you a simple understanding of how to use custom animation.

Bug hint: the following two examples use the vsdoc2 Smart Tip version of the jQuery class library to have the problem that transparency cannot be graded under FireFox. Please use another version.

Customize the fall animation:

This example causes a layer to fall from the top to the bottom of the screen and disappears.

JQuery Animation-fadeTo $(document) .ready (function () {$("# divPop") .animate ({"opacity": "hide") "top": $(window). Height ()-$("# divPop"). Height ()-$("# divPop"). Position () .top}, function () {$("# divPop"). Hide () }); pop-up layer

Customize the dissipative animation:

This example makes a div get bigger and bigger * disappear:

JQuery Animation-fadeTo $(document) .ready (function () {$("# divPop") .animate ({"opacity": "hide", "width": $(window) .width ()-100 "height": $(window). Height ()-100} 500) }); pop-up layer

six。 Global control attribute

* talk about the attributes related to animation:

Name: jQuery.fx.off

Return value: Boolean

Description:

Close all animations on the page.

Explanation:

Set this property to true to turn off all animations immediately (all effects will be executed immediately). This may be necessary in some cases, such as:

* you use jQuery on a computer with a lower configuration.

* some of your users are experiencing accessibility problems due to animation effects

When this property is set to false, all animations can be reopened.

For example, the following code performs a disabled animation:

JQuery.fx.off = true; $("# divPop") .show (1000)

Although the animated show function is used, because all animations are turned off, div is displayed immediately without a gradient effect.

This is the answer to the question about how jQuery makes the page move. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.