jquery Basics (Animated text animate, show hidden, fade in, drop down toggle)

The Hide method of hidden elements in 1.jQuery makes the elements on the page invisible and can generally be set by setting 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 $ ("Button:last"). Click (function () {$ ("#a2"). Hide ({duration:3000,})}); Show method for displaying elements in 2.jQuery Hide is to let the element show to hide, show is the opposite, let the element from hide to display-The show and hide methods are modified by the display property, which is required by the Visibility property layout to be set separately by 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 override the style using. css (' Display ', ' Block!important ')-if show and hide become an animation, the default animation changes the height, height, and transparency of the element by 3. jquery shows the basic operation with the hidden Toggle Toggle Method: 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 hidden, it will show that the display property will be stored and can be restored when needed. If the display value of an element is inline, then it is hidden and displayed, this element will again display the inline supply parameters:. Toggle ([duration] [, complete]) also provides the time, as well as the end-of-animation callbacks. 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. $ ("Button:last"). Click (function () { $ (". Right"). Toggle (+)     });4.jQuery Lower Draw Slidedown . Slidedown (): Display a matching element with a sliding animationThe. Slidedown () method will give an animation that matches the height of the element, which causes the lower part of the page to slide down, making up the way common operations are shown, providing an animation is time and then passing a callback that is used to know when the animation is ending. Slidedown ([duration] [ , complete]) duration (duration) is in milliseconds, and the larger the number, the slower the animation, 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 another action after 1 seconds ....
}); Precautions :-The next draw is from scratch, so the first element is to be hidden first, you can set display:none-if you provide a callback function parameter, callback will be 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.   $ ("Button:last"). Click (function () { $ ("#a2"). Slidedown (3000,function () { alert (' End of animation execution ')             })         }); 5.The simplest use of roll-up animation slideup in jquery: 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]) can also provide a time, and then use a transition to use which easing function, jquery by default 2, you can download 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 $ ("Button:last"). Click (function () { $ ("#a2"). Slideup (3000,function () { alert (' End of animation execution ')             })         });6.jQuery Roll-up drop-down toggle Slidetoggle jquery provides a convenient way to slidetoggle or hide a matching element with a sliding animationBasic 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. Provides parameters:. Slidetoggle ([duration], [complete]) also provides the same time, and the end of the animation callback. At the time of the parameter, the element will complete the animation, and the departure callback function also provides a quick definition of the time, the string ' fast ' and ' slow ' represent 200 and 600 milliseconds of delay respectively.   Note:-The Display property value is stored in the jquery data cache, so display can be easily restored to its initial value later-when a hidden animation has a height value of 0, the display style property is set to none to ensure that the element no longer affects the page layout $ ("button"). Click (function () { $ ("#a1"). Slidetoggle (+)         });Fade animation fadeout in 7.jQuery setting the element transparency to 0 allows the element to be invisible, and the transparency parameter is the value between the 0~1, which allows the element to have a transparency effect by changing the value. This is how common fade animations are. The FadeOut () function is used to hide all matching elements, and with the fade-out transition animation effect so-called "fade Out" hidden, the element is hidden without any changes, 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 $ ("P"). FadeOut ();   $ ("P"). FadeOut ({ duration:1000             }); $ ("P"). FadeOut ((), function () { alert ("Hidden!");             });8.jQuery Fade in animation Fadein 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 be executed 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. Note:-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 in the 9.jQuery fade Toggle Fadetoggle fadetoggle () function toggles all matching elements with a fade-in/fade-out animation effect. I have also learned that toggle, Slidetoggle is a similar way of handling Fadetoggle toggle fadeout and Fadein effect, so-called "toggle", that is, if the element is currently visible, then hide it (fade out), if the element is currently hidden, make it appear (fade in). 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. (as in the way above) .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 0 to 1
FadeOut: 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. $ ("P"). FadeTo ("slow", 0.5);   $ ("P"). FadeTo (0.2);        $ ("P"). FadeTo (0.9, function () { alert (' Done ') });  Comparison of toggle with Slidetoggle and Fadetoggle in 11.jQuery There are several ways to display and hide an action element. For example:-Change the style display to none-set position height of 0-set the transparency to 0 to achieve this goal, and for such processing jquery has provided the respective method. 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 effect-sildetoggle: Toggle pull-up 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 effects 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 the fade-in display, 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 12.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 Syntax: . 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 TimeThe 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 motionSwing is called by default in the jquery library. If you need additional animation algorithms, look for the relevant plugin Complete CallbackThe function that is executed when the animation is completed, which guarantees that the current animation will trigger if (v = = "1") {//numeric units default is PX $aaron. Animate ({ width:300, height:300             });} else if (v = = "2") {//Add 100px on the existing height $aaron. Animate ({ width: "+=100px", Height: "+=100px"             });} else if (v = = "3") { $aaron. Animate ({ fontSize: "5em" }, #, function () { alert ("Animation fontsize executed!");             });} E LSE if (v = = "4") { //switch height by toggle parameter $aaron. Animate ({ width: "Toggle"             });13.jQuery animate animate (under) animate in the execution of animations, if you need to observe some of the animation's execution, or do some other processing at some point in the animation, we can pass an object parameter through the second set syntax provided by Animate, Can get some notifications of animation execution status . Animate (Properties, Options)Options parameter-duration-sets the time the animation executes-easing-specifies the easing function to use, which easing function is used for the transition-step: The function to execute after each step of each animation is completed-progress: Every time the animation is called, it executes This callback is a concept of progress-complete: The key point of the animation completion callback is that if more than one element is animated, the callback will be executed once on each matched element, not as a common way to list it once for the entire animation: $ (' #elem '). Animate ({
Width: ' Toggle ',
Height: ' Toggle '
}, {
duration:5000,
Specialeasing: {
Width: ' Linear ',
Height: ' easeoutbounce '
},
Complete:function () {
$ (this). After (' <div>animation complete.</div> ');
}
});

Stop animation stops in 14.jQuery The animation is allowed to be paused during execution, when an element is called. Stop () method, the currently running animation (if any) stops immediatelyGrammar:   . Stop ([Clearqueue], [jumptoend])
. Stop ([queue], [Clearqueue], [jumptoend])
Stop also has a few optional parameters that can be simply said in these 3 cases-. Stop (); To stop the current animation, click Start at Pause-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 will stop, but the CSS properties on the element will be immediately modified to the target value of the animation simply: refer to the following code, $ ("#aaron"). Animate ({
height:300
}, 5000)
$ ("#aaron"). Animate ({
width:300
}, 5000)
$ ("#aaron"). Animate ({
opacity:0.6
}, 2000)

-Stop (): Stops only the first animation, the second third continues -Stop (true): Stops the first, second, and third animations -Stop (true ture): Stops the animation and jumps directly to the final state of the first animationApplication of each method in 15.jQuery jquery has an important core approach to each, most jquery methods internally call each, the main reason is that the example of jquery is a collection of elements as follows: Find all the div, and set the style, CSS is just a method, so the interior calls each to handle the collection of this div, giving each div a style property of $ (' 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. jquery also provides a common Jquery.each method for handling object and array traversal syntax 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 class net"], function (index, value) {
Index, which is the index of the array
Value is the values 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 //Iterate over array elements $.each ([' Aaron ', ' mu class net '], function (I, item) { $aaron. Append ("index =" + i + "; element = "+ item");             });   $.each ({ name: "Zhang San", age:18 }, function (property, value) { $aaron. Append ("attribute name =" + Property + "; Property value = "+ value");    });Find an index in an array in 16.jQuery inarray PHP has In_array () to determine if an element exists in an array, but 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, can be specified by Fromindex the starting value of the lookup, the default array is 0 start for example: Look for the index in the array value is 5 $.inarray (5,[1,2,3,4,5,6,7])//Returns the corresponding index: 4

Note: If you want to determine if there is a specified value in the array, you need to pass the function's return value not equal to (or greater than)-one to determine if (v = = "1") {   var index = $.inarray (' Aaron ', [' Test ', ' Aaron ', ' array ', ' mu class net ']);   $aaron. Text (' Aaron's index is: ' + index ')   } else if (v = = "2") {   //Specify where the index starts var index = $.inarray (' A ', [' A ', ' B ', ' C ', ' d ', ' a ', ' C '],2);   $aaron. Text (' A's index is: ' + index ')         }17.jQuery in the Go Space Artifact Trim Method page, input can be used to get the user entered values, such as common logon information for the submission process. 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 stringThis function is simple, there is no extra parameter usage 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 are preserved and are not removed   alert ("Length of Value:" + $.trim ($ ("#results2"). Val ()). Length)Get get method of DOM element in 18.jQuery jquery is a collection object, and if you need to manipulate one element of a set individually, you can get to the following 3 A-element structure by using the. Get () Method: <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 methodSyntax:. get ([index])

Note 2 points -The Get method is the obtained DOM object, which is the object obtained through document.getElementById -The Get method is indexed starting from 0So the second A-element lookup: $ (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 of the negative values is-1 the same is found for the second element, which can be passed $ (a). Get (-2)   $aaron. Get (1). Style.color = "Blue" $aaron. Get ( -1). Style.color = "#8A2BE2"Get the index method for DOM elements in 19.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 parameters to the. Index () method, the return value is the position of the first element in the jquery object relative to its sibling element-if it is called on a set of elements. Index (), and the parameter is a DOM element or a jquery object,. Index () The return value is the position of the passed 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 simply put: <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, the first Li has a element before, the peer element is a start of 0, so Li's start index is 1 if you want to quickly find the second Li in the list of indexes, There are 2 ways to handle   $ ("Li"). Index (document.getElementById ("test2"))//Result: 1
$ ("Li"). Index ($ ("#test2"))//results: 1

jquery Basics (Animated text animate, show hidden, fade in, drop down toggle)