JQuery-4. Animated Articles---Animation basics hidden and displayed

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

<div class= "Left" >
<div id= "A1" >hide Operation </div>
<button> Direct hide</button>
<script type= "Text/javascript" >
Click Buttom1 to hide directly
$ ("Button:first"). Click (function () {
$ ("#a1"). Hide ()
});
</script>


<div id= "A2" >hide animation operation </div>
<button>hide led painting </button>
<script type= "Text/javascript" >
Click Buttom2 to perform an animated hide
$ ("Button:last"). Click (function () {
$ ("#a2"). Hide ({
duration:3000,
Complete:function () {
Alert (' Perform 3000ms animation complete ')
}
})
});
</script>

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.

<script type= "Text/javascript" >

Click button
Perform 3 second hidden
Perform 3 second display
$ ("button"). Click (function () {
$ ("#a1"). Hide (+). Show (3000)
});

</script>

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.

<script type= "Text/javascript" >
$ ("Button:first"). Click (function () {
$ (". Left"). Toggle (3000)
});
</script>

<script type= "Text/javascript" >
$ ("Button:last"). Click (function () {
$ (". Right"). Toggle (3000)
});
</script>

JQuery-4. Animated Articles---Animation basics hidden and displayed