"Summarize and Organize" jquery Basic Learning---animation

Hide method of hidden elements in jquery

To make the elements on the page invisible, you can generally set the display of the CSS to the None property. But through the direct modification of CSS is static layout, if the code is executed, usually through the JS control element of the Style property, here jquery provides a quick way. Hide () to achieve this effect

$elem. Hide ()

Provide parameters:

. Hide (Options)

When you provide a parameter to the Hide method,. Hide () becomes an animated method: The Hide () method will match the width, height, and opacity of the element, while animating

Quick parameters:

. Hide ("Fast/slow")

This is a shortcut to the animation settings, ' Fast ' and ' slow ' represent 200 and 600 millisecond delay, that is, the element will perform 200/600 milliseconds of animation before hiding

Attention:

When jquery is doing the hide operation, it will save the original attribute value of its own element, and then restore it by the corresponding method when it is the initial value. For example, if the display property value of an element is inline, the element will display the inline again when it is hidden and then displayed. Once the transparency reaches the 0,display style property will be set to none, this element will no longer affect the layout in the page

Show method for displaying elements in jquery

CSS has display:none properties and Display:block, so jquery also provides a show method that is the opposite of hide.

The use of methods is almost consistent with hide, hide is to let the elements show to hide, show is the opposite, let the elements from hidden to display

Look at a piece of code: Using the same, the result is the opposite

$ (' elem '). Hide (+). Show (3000)

Lets the element perform a 3-second hidden animation, and then performs a 3-second display animation.

The show and hide methods are very common, but they are rarely animated based on these 2 properties, and in most cases the display and shadowing of the elements are primarily

Precautions:

• The show and hide methods are modified by the display property, which is required by the Visibility property layout to be set separately through the CSS method
• If you use!important in your style, such as Display:none!important, if you want the. Show () method to work correctly, you must use. css (' Display ', ' Block!important ') to override the style
• If show and hide become an animation, the default animation changes the height, height, and transparency of the element.

Show and hide toggle Toggle method in jquery

Show and hide are a pair of mutually exclusive methods. A hidden mutex switch is required for the element to be displayed, usually by first judging the display state of the element and then calling its corresponding processing method. such as the displayed element, then hide is called, and vice versa. For such operations, jquery provides a convenient way to toggle the display or hide matching elements toggle

Basic operation: Toggle ();

This is the most basic operation, the processing element is displayed or hidden, because there is no parameter, so there is no animation. By changing the display property of the CSS, the matching elements are immediately displayed or hidden, without animations.

• If the element is initially displayed, it will be hidden
• If it's hidden, it'll show up.

The display property is stored and can be restored when needed. If the display value of an element is inline and then hidden and displayed, this element will again display the inline

Parameters available:. Toggle ([duration] [, complete])

The same provides the time, and also the end of the animation callback. During the time of the parameter, the element will be changed to show/hide, and the height, width and opacity of the element will be animated in a series of changes. This element is actually the method of show and hide.

Direct positioning:. Toggle (Display)

Directly provides a parameter that specifies the final effect of the element to be changed

is to determine whether to use the show or hide method

if (display = = = True) {  $ ("Elem"). Show ();} else if (display = = = False) {  $ ("Elem"). Hide ();

The toggle method is a quick way to switch between show and hide, depending on the case to the right:

jquery Lower Draw Slidedown

For hidden elements, you can animate them in some way during the process of displaying them. Before I learned the Show method, the Show method can also be animated during the display, but the. Show () method will match the width, height, and opacity of the element, while animating. Here is going to learn a new display method Slidedown method

. Slidedown (): Display a matching element with a sliding animation

The. Slidedown () method will give the animation of the height of the matched element, which causes the lower part of the page to slide down, making up the way the display

A common operation that provides an animation is time and then passes a callback that is used to know when the animation is ending

. Slidedown ([duration] [, complete])

Duration (duration) is measured in milliseconds, and the larger the number, the slower the animation, and the faster it is. The string ' fast ' and ' slow ' represent a delay of 200 and 600 milliseconds, respectively. If any other string is provided, or if the duration parameter is omitted, then the default is 400 milliseconds of delay.

Specific use:

$ ("Ele"). Slidedown (+, function () {    //wait for the animation to execute after 1 seconds, perform another action ....});

Precautions:

• The next draw is from scratch, so the first element is to be hidden first, can be set Display:none
• If a callback function argument is provided, callback is called when the animation is complete. It is useful to concatenate different animations together in sequential execution. This callback function does not set any parameters, but this is set to the DOM element that will be animated, and if multiple elements are animated together, it is important to note that the callback function executes once for each element after the animation is performed, not the whole set of animations.

Roll up animation slideup in jquery

For the displayed element, you can animate it in some way during the process of hiding it. Before I learned the Hide method, the Hide method can also be animated during the display, but the. Hide () method animates the width, height, and opacity of the matching element. Here is going to learn a new display method Slideup method

Easiest to use: without parameters

$ ("Elem"). Slideup ();

The meaning of this use is: Find the height of the element, and then use a slide animation to keep the element sliding to hide, when the height is 0, which is not visible, the modified element display style property is set to none. This will ensure that this element does not affect the layout of the page.

With parameters:

. slideup ([duration] [, easing] [, complete])

You can also provide a time, and then you can use a transition to use which easing function, jquery by default 2 kinds, can be downloaded by the plugin support. The callback method at the end of the last animation.

Because animations are asynchronous, you have to write to the callback function to perform certain operations after the animation, so pay special attention to

jquery Roll-up drop-down toggle Slidetoggle

Slidedown and Slideup are a pair of opposite methods. The need to toggle the elements up and down, jquery provides a handy way to slidetoggle or hide a matching element with a sliding animation

Basic operation: Slidetoggle ();

This is the most basic operation, to get the height of the element, so that the height of the element changes, so that the contents of the element down or upward slide.

Parameters available:. slidetoggle ([duration], [complete])

The same provides the time, and also the end of the animation callback. Within the time of the parameter, the element completes the animation and then the callback function

It also provides a quick definition of time, with the string ' fast ' and ' slow ' representing a delay of 200 and 600 milliseconds, respectively.

Slidetoggle ("Fast") Slidetoggle ("Slow")

Attention:

• Display property values are stored in jquery's data cache, so display can be easily restored to its initial value later
• When the height value reaches 0 after a hidden animation, the display style property is set to none to ensure that the element no longer affects the page layout

Fade animation fadeout in jquery

The usual way to make an element invisible on the page is by setting the display:none of the style. In addition, some similar approaches can be used to achieve this goal. Here is a method of transparency, set the element transparency to 0, can make the element invisible, the transparency parameter is the value between 0~1, by changing this value can let the element have a transparency effect. This is how common fade animations are.

The FadeOut () function is used to hide all matching elements with a fade-out transition animation effect

The so-called "fade Out" hidden, the element is hidden state is not made any change, the element is visible, then it is hidden.

. FadeOut ([duration], [complete])

The fade-out effect of all matching elements is achieved by changing the opacity, and optionally triggering a callback function after the animation is complete. This animation only adjusts the opacity of the element, meaning that the height and width of all matching elements do not change.

The string ' fast ' and ' slow ' represent a delay of 200 and 600 milliseconds, respectively. If any other string is provided, or if the duration parameter is omitted, then the default is 400 milliseconds delay

Fade animation Fadein in jquery

Fadeout is the fade effect, on the contrary, there is a fade effect Fadein, the method uses both are consistent, but the result is the opposite

. fadeIn ([duration], [complete])

• Duration: Specifies how long the transition animation runs (in milliseconds) and the default value is 400. This parameter can also be a string "fast" (=200) or "slow" (=600).
• The function to execute after the element is displayed. This point within the function points to the current DOM element.

The FadeIn () function is used to display all matching elements with a fade-in animation effect.

Attention:

• Fade in animation principle: the opacity of the manipulation element is gradually increased from 0% to 100%
• If the element itself is visible, no change is made to it. If the element is hidden, make it visible

jquery fade in and out toggle Fadetoggle

The Fadetoggle () function toggles all matching elements, with a fade-in/fade-out animation effect. I've also learned that toggle and Slidetoggle are a similar approach.

Fadetoggle toggles the fadeout and Fadein effects, so-called "toggle", that is, if the element is currently visible, hide it (fade out), or display it (fade in) if the element is currently hidden.

Common syntax:. Fadetoggle ([duration], [complete])

The optional duration parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The optional callback parameter is the name of the function that is executed after Fadetoggle completes.

The Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method. If the element has faded out, fadetoggle () adds a fade effect to the element. If the element has been faded in, fadetoggle () adds a fade effect to the element.

jquery Fade in effect Fadeto

Fade Fadein and fadeout are opacity properties that modify element styles, but they all share a common feature, with varying intervals of 0 or 1

FadeIn: Fade in effect, content display, opacity is 0 to 1fadeOut: Fade out effect, content hidden, opacity is 1 to 0

What do I do if I want to animate an element and perform the Opacity = 0.5 effect?

If we do not consider CSS3, we use JS implementation, the basic is through the timer, in the set time within a little bit of modification opacity value, The ultimate is 0.5, although the principle is simple, but it is not as comfortable as a key setting, jquery provides a Fadeto method that allows for a change in transparency one step

Grammar

. FadeTo (Duration, opacity, callback)

The required duration parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The required opacity parameter in the FadeTo () method sets the fade effect to the given opacity (values between 0 and 1). The optional callback parameter is the function name that is executed after the function completes.

Comparison of toggle with Slidetoggle and Fadetoggle in jquery

There are several ways to display and hide an action element.
For example:

• Change style display to none
• Set position height to 0
• Set the transparency to 0

Can achieve this, and it provides a way to deal with jquery. Show/hide, Sildedown/sildeup, Fadein/fadeout. In addition, toggle, Sildetoggle, and Fadetoggle switching methods are introduced.

The difference between toggle, Sildetoggle, and Fadetoggle:

• Toggle: Toggle Display and hide effects
• Sildetoggle: Toggle roll up and down roll effect
• Fadetoggle: Toggle Fade Effect

There are, of course, more differences in the details:

Toggle and slidetoggle Detail differences:

• Toggle: The dynamic effect is from right to left. Horizontal motion, toggle the visibility of all matching elements through display
• Slidetoggle: Dynamic effect from bottom to top. Vertical action, Slidetoggle toggles the visibility of all matching elements through a height change

Fadetoggle method

• The Fadetoggle () method toggles between the FadeIn () and the FadeOut () methods.

• The elements are faded out, and fadetoggle () displays them using the fade-in effect.

• The elements are in-fade, and fadetoggle () displays them using the fade effect.

• Note: Hidden elements are not fully displayed (no longer affect the layout of the page)

Animate animate in jquery (top)

Some of the more complex animations are not achievable by using a few of the animation functions that have been learned before, and a powerful animate method is required.

Manipulate an element to perform a 3-second fade-in animation, comparing the differences between the 2 set of animation settings

$ (elem). FadeOut ($)  $ (elem). Animate ({       opacity:0},3000)

It is obvious that the animate method is more flexible and can precisely control style properties to perform animations

Grammar:

. Animate (Properties, [duration], [easing], [complete]). Animate (Properties, Options)

The. Animate () method allows us to create animations on the CSS properties of any numeric value. 2 grammars are used, almost almost, and the only necessary property is a set of CSS property key-value pairs. This set of properties is similar to the property key-value pair used to set the. css () method, except that the attribute scope makes more restrictions. The second argument can start by passing more than one argument, or it can be combined into an object to pass the

Parametric decomposition:

Properties: An object that consists of key-value pairs of one or more CSS properties. It is important to note that all properties used for animation must be numeric, unless otherwise noted, and those properties that are not numeric will not be able to use the basic jquery functionality. such as common, border, margin, padding, width, height, font, left, top, right, bottom, wordspacing, and so on, these are can produce animation effect. Background-color is obviously not possible, because the parameters are red or gbg such values, very use plug-ins, otherwise it is normally not only animated effect. Note that CSS styles are set using DOM names (such as "fontSize") rather than CSS names (such as "font-size").

Pay special attention to units, attribute values in units of pixels (px), unless otherwise noted. Units em and% need to be specified using

. Animate ({    left:50,   width: ' 50px '   opacity: ' Show ',   fontSize: "10em",}, 500);

In addition to defining values, each property can use ' show ', ' Hide ', and ' toggle '. These shortcuts allow custom hiding and display animations to control the display or hiding of elements

. Animate ({    width: "Toggle"});

If you provide a value starting with + = or-=, the target value is calculated with the current value of the attribute plus or minus the given number.

. Animate ({left: ' +=50px '}, "slow");

Duration time

The time, in milliseconds, that the animation executes, and the larger the value, the slower the animation is performing, the faster it is. You can also provide ' fast ' and ' slow ' strings, representing durations of 200 and 600 milliseconds, respectively.

The algorithm of easing animation motion

Swing is called by default in the jquery library. If you need additional animation algorithms, look for the relevant plugin

Complete callback

The function that is executed when the animation is completed, which guarantees that the current animation will trigger when it is determined to complete.

Animate animate in jquery (bottom)

Animate in the execution of animation, if you need to observe some of the animation performance, or at some point in the animation to do some other processing, we can be provided by animate the second set of syntax, passing an object parameter, you can get animation execution status some notifications

. Animate (Properties, Options)

Options parameters

• Duration-set time for animation execution
• Easing-Specifies the easing function to use, and which easing function to use for the transition
• Step: Specifies the function to be executed after each animation step is completed
• Progress: This callback is executed every time the animation is called, which is a concept of progress
• Complete: Animation Completion callback

One of the key points is:

If more than one element is animated, the callback executes once on each matched element, not once as an entire animation

List the common ways:

$ (' #elem '). Animate ({width: ' toggle ',  height: ' Toggle '}, {duration:5000, specialeasing: {width: ' Linear ', Height: ' easeoutbounce '}, Complete:function () {$ (this). After (' <div>animation.    </div> '); }  });

Stop animation stops in jquery

The animation is allowed to be paused during execution, when an element is called. Stop () method, the currently running animation (if any) stops immediately

Grammar:

. Stop ([Clearqueue], [Jumptoend]). Stop ([queue], [Clearqueue], [jumptoend])

Stop has a few optional parameters that can be simply said to be in these 3 cases

• . Stop (); Stop the current animation, click on the pause to continue to start
• . Stop (true); If the same element calls multiple animation methods, the animation that has not yet been executed is placed in the effect queue of the element. These animations do not start until the first one is finished. When you call. Stop (), the next animation in the queue starts immediately. If the Clearqueue parameter provides a true value, the rest of the animation in the queue is deleted and will never run
• . Stop (True,true); The current animation stops, but the CSS properties on the element are immediately modified to the target value of the animation

Simply put: Refer to the following code,

$ ("#aaron"). Animate ({    height:300}, (+) $ ("#aaron"). Animate ({    width:300}, +) $ ("#aaron"). Animate ({    opacity:0.6}, 2000)

1. Stop (): Only the first animation is stopped, the second third one continues
2. Stop (TRUE): Stops the first, second, and third animations
3. Stop (true ture): Stops the animation and jumps directly to the final state of the first animation

The application of each method in jquery

There is an important core approach to jquery, and most of the jquery methods are internally called each, and the main reason is that the instance of jquery is an element-collection

As follows: Find all the div, and set the style, CSS is just a method, so the interior will call each processing this div's collection, set the Style property for each div

$ (' div '). CSS (...)

Most of the methods of jquery are needle-element-collection operations, so jquery provides $ (selector). each () to traverse the jquery object

. Each is just a way to work with jquery objects, and jquery also provides a common Jquery.each method for handling object and array traversal

Grammar

Jquery.each (Array, callback) Jquery.each (object, callback)

The first argument passes an object or an array, and the second is the callback function

$.each (["Aaron", "mu net"], function (index, value) {   //index is the index, that is, the index of the array   //value is the value in the array});

Each is a wrapper for the For loop method, which internally iterates through the array and object through the for, and returns some parameters of the inner iteration through the callback function, the first parameter is the index value of the current iteration member in the object or array (counting from 0), and the second argument is the current iteration member (same as the reference to this)

The Jquery.each () function also determines subsequent actions based on the return value of each call to the function callback. If the return value is False, the loop is stopped (equivalent to break in the normal loop), and if any other value is returned, the next loop is resumed.

$.each (["Aaron", "MU class net"], function (index, value) {    return false;//Stop Iteration});

The jquery method can easily traverse a data without considering whether the data is an object or an array

Find the index in the array in jquery inarray

While PHP has In_array () to determine whether an element exists in an array, JavaScript does not, but jquery encapsulates the inarray () function to determine whether an element exists in an array. Note: The IndexOf method, which already has data in ECMAScript5, is supported, but jquery keeps the version backwards compatible, so encapsulates a inarray method

The Jquery.inarray () function searches the array for the specified value and returns its index value. If the value does not exist in the array, 1 is returned.

Grammar:

Jquery.inarray (value, array, [FromIndex])

The usage is very simple, passing a detection of the target value, and then passing the original array, which can be found by fromindex the starting value, the default array is 0 start

For example: Look for the index in the array whose value is 5

$.inarray (5,[1,2,3,4,5,6,7])//Returns the corresponding index: 4

Attention:

If you want to determine if a specified value exists in the array, you need to determine whether the function's return value is not equal to (or greater than)-one

jquery in the Go Space Artifact trim method

page, the input value of the user can be obtained through input, such as the submission processing of common logon information. User input is not necessarily standard, enter a password: ' 1123456 ', note: the password before and after will be left blank, this may be the user's unintentional behavior, but the password is true, for such behavior, developers should determine whether the input value before and after the white space, newline characters, A tab is such an obvious meaningless input value.

The Jquery.trim () function is used to remove whitespace characters at both ends of a string

This function is very simple and there is no extra parameter usage.

Need to note:

• Removes all line breaks at the beginning and end of a string, spaces (including contiguous spaces), and tabs (tab)
• If these whitespace characters are in the middle of a string, they will be preserved and not removed

Getting get methods for DOM elements in jquery

jquery is a collection object that can be obtained by using the. Get () method if you need to manipulate one element of a set individually.

Here are 3 elements of a structure:

<a>1</a><a>2</a><a>3</a>

Get all the A-element collections through jquery $ ("a"), and if you want to find a 22nd DOM element in the collection to be processed separately, you can use the Get method

Grammar:

. get ([index])

Note 2 points

1. The Get method is the obtained DOM object, which is the object obtained through document.getElementById
2. The Get method is indexed starting at 0

So look for the second a element: $ (a). Get (1)

Negative index value parameter

The Get method can also pass a negative index value from a backward index, noting that the index starting value for negative values is-1

The same is found for the second element, which can be passed $ (a). Get (-2)

The Get index method for DOM elements in jquery

The Get method is to find the corresponding element in the collection through a known index. If this is the reverse, how do the known elements find the corresponding index in the collection?

The. Index () method, which searches for the index value of a given element from a matching element, counts from 0.

Syntax: Parameters accept a jquery or Dom object as a condition for finding

. index (). Index (selector). Index (Element)

• If you do not pass any arguments to the. Index () method, the return value is the position of the first element in the jquery object relative to its sibling element
• If the. Index () is called on a set of elements, and the parameter is a DOM element or a jquery object, the. Index () return value is the position of the passed-in element relative to the original collection
• If the parameter is a selector, the. index () return value is the position of the original element relative to the selector match element. If no matching element is found, then. Index () returns-1

In simple terms:

<ul> <a></a> <li id= "test1" >1</li> <li id= "test2" >2</li> <li id= " Test3 ">3</li></ul>

$ ("Li"). Index () does not pass arguments, anyway the result is 1, it means to return the order of peers, before the first Li has a element, the sibling element is a start of 0, so the starting index of LI is 1

If you want to quickly find the second Li index in the list, you can handle the following 2 ways

$ ("Li"). Index (document.getElementById ("test2"))//Result: 1$ ("Li"). Index ($ ("#test2"))  //Result: 1

"Summarize and Organize" jquery Basic Learning---animation