Home>

This article is mainly to explain and learn the automatic display of jquery,Fade in, fly out, custom animation, and more.Very detailed,Here is recommended for those who need it.

1. Show and hide hide () and show ()

For animation,Showing and hiding is one of the most basic effects.This section briefly introduces the display and hiding of jquery.

<script type="text/javascript">
 $(function () {
 $("input:first"). click (function () {
 $("p"). hide ();//Hide
 });
 $("input:last"). click (function () {
 $("p"). show ();//show
 });
 });
 </script>
 <input type="button" value="hide">
 <input type="button" value="show">
 <p>Click the button,See the effect</p>
 <div><em>This section mainly downgrades and learns the automatic display of jquery,Fade in and out, fly in and fly out.
Custom animations, etc.
 1. Show and hide hide () and show () For animation,Showing and hiding is one of the most basic effects.
This section briefly introduces the display and hiding of jquery.
</em>
 </div>

The above is a test of the hide () and show () functions.

2.Use show (), hide () and toggle () methods

The previous example briefly introduced the show () and hide () methods.In fact, these two methods can accept parameters to control the display and hide process.

The syntax is as follows

show (duration, [callback]);

hide (duration, [callback]);

Among them, duration represents the length of the animation execution time,A string that can represent speed,Including slow, normal, fast. It can also be an integer (milliseconds) representing time. callback is an optional callback function.Executed after the animation is complete.

<script type="text/javascript">
 $(function () {
 $("input:first"). click (function () {
 $("p"). hide (300);//Hide
 });
 $("input:last"). click (function () {
 $("p"). show (500);//show
 });
 });
 </script>

The example is the same as the first example,Just add time parameters to hide () and show ().In fact, toogle () can also add event parameters.

2. Use fadein () and fadeout () methods

For animation effects,jquery also provides fadein () fadeout two practical methods,Their animation effect is similar to fading,The syntax is exactly the same as slow () and hide ().

fadein (duration, [callback]);

fadeout (duration, [callback]);

example

<script type="text/javascript">
 $(function () {
 $("input:eq (0)"). click (function () {
 $("img"). fadeout (3000);//gradual fadeout
 });
 $("input:eq (1)"). click (function () {
 $("img"). fadein (1000);//gradual fadein
 });
 });
</p>
<p>
</script>
</p>
<p>
<img src="">
 <input type="button" value="hide">
 <input type="button" value="show">

Use of the fadeto () method.

The fadeto () method gradually changes the opacity of the selected element to the specified value.

example:

<script type="text/javascript">
 $(function () {
 $("input:eq (0)"). click (function () {
 $("img"). fadeout (1000);
 });
 $("input:eq (1)"). click (function () {
 $("img"). fadein (1000);
 });
 $("input:eq (2)"). click (function () {
 $("img"). fadeto (1000, 0.5);
 });
 $("input:eq (3)"). click (function () {
 $("img"). fadeto (1000, 0);
 });
 });
 </script>
 <p><img src="03.jpg"></p>
<input type="button" value="fadeout">
<input type="button" value="fadein">
<input type="button" value="fadeto 0.5">
<input type="button" value="fadeto 0">

fadeout related parameters

speed

Optional. Specifies the speed of the element from the current transparency to the specified transparency.

Possible values:

Milliseconds (e.g. 1500)

"slow"

"normal"

"fast"

opacity is required. Specifies the transparency to be faded in or out.Must be a number between 0.00 and 1.00.

callback

Optional. After the fadeto function is executed,The function to execute.

To learn more about callbacks, please visit our jquery callback chapter.

This parameter cannot be set unless the speed parameter is set.

3. Slideup and slidedown effects

<script type="text/javascript">
 $(function () {
 $("input:eq (0)"). click (function () {
 $("div"). add ("img"). slideup (1000);
 });
 $("input:eq (1)"). click (function () {
 $("div"). add ("img"). slidedown (1000);
 });
 $("input:eq (2)"). click (function () {
 $("div"). add ("img"). hide (1000);
 });
 $("input:eq (3)"). click (function () {
 $("div"). add ("img"). show (1000);
 });
 });
 </script>
 <input type="button" value="slideup">
 <input type="button" value="slidedown">
 <input type="button" value="hide">
 <input type="button" value="show"<br>
 <div></div><img src="04.jpg">

I mentioned several animation effects,jquery also provides slideup () and slidedown () to simulate similar slide curtain effect in ppt,It's exactly the same as slow () and hide ().

The above code defines a div and an img, which are combined using the add method.

4. Custom Animation

Considering the generality of the framework and the size of the code file,jquery cannot cover all animation effects,But it provides the animate () method, which enables developers to customize the animation.This section mainly introduces the two forms and applications of the animate () method.

The animate () method gives developers a lot of room.It comes in two forms.The first form is more commonly used.The usage is as follows

animate (params, [duration], [easing], [callback])

Where params is a list of css attributes that i want to change,And the final value i want to change,duration is optional,The meaning of the parameter is the same as that of show ()/hide ().easing is an optional parameter,Usually used by animation plugins. Used to control the process of rhythm change.jquery only provides two values, linear and swing. callback is an optional callback function.Fires after the animation is complete.

requires attention.The variables in params follow the camel nomenclature.For example, paddingleft cannot be written as padding-left. In addition, params can only be attributes with numerical values ​​in css.E.g. width.top.opacity etc.

Properties like backgroundcolor are not supported by animate.

<style>
 div {
 background-color:#ffff00;
 height:40px;
 width:80px;
 border:1px solid #000000;
 margin-top:5px;
 padding:5px;
 text-align:center;
 }
 </style>
 <script type="text/javascript">
 $(function () {
 $("button"). click (function () {
 $("#block"). animate ({
 opacity:"0.5", width:"80%", height:"100px", borderwidth:"5px", fontsize:"30px", margintop:"40px", marginleft:"20px"
 }, 2000);
 });
 });
 </script>
 <button>go>></button>
 <div>Animation!</div>

In params, jquery can also use "+ =" or "-=" to indicate relative changes.Such as

<style>
 div {
 background-color:#ffff00;
 height:40px;
 width:80px;
 border:1px solid #000000;
 margin-top:5px;
 padding:5px;
 text-align:center;
 position:absolute;
 }
 </style>
 <script type="text/javascript">
 $(function () {
 $("button:first"). click (function () {
 $("#block"). animate ({
 left:"-= 80px" //relative left
 }, 300);
 });
 $("button:last"). click (function () {
 $("#block"). animate ({
 left:"+=80px" //Relative right
 }, 300);
 });
 });
 </script>
 <button>go>></button>
 <button>go>></button>
 <div>Animation!</div>

First absolute position the div,Then use-= and +=in animate () to achieve relative left and relative right shifts, respectively.

The animate () method has another form,As follows:

animate (params, options)

Among them, params are exactly the same as the first form,options is a list of optional parameters for the animation,It mainly includes duration, esaing, callback, queue, etc., where duration.easing.callback is exactly the same as the first form,queue is a boolean,Indicates that when multiple animate () forms a jquery, is the current animate () immediately following the next animate (), whether to be executed in order (true) or trigger false

The following example,Shows the second usage of animate ().

<style>
 div {
 background-color:#ffff22;
 width:100px;
 text-align:center;
 border:2px solid #000000;
 margin:3px;
 font-size:13px;
 font-family:arial, helvetica, sans-serif;
 }
 input {
 border:1px solid #000033;
 }
 </style>
 <script type="text/javascript">
 $(function () {
 $("input:eq (0)"). click (function () {
 //The first animate is executed simultaneously with the second animate,Then execute the third
 $("#block1"). animate ({
 width:"90%"
 }, {
 queue:false, duration:1500
 })
 .animate ({
 fontsize:"24px"
 }, 1000)
 .animate ({
 borderrightwidth:"20px"
 }, 1000);
 });
 $("input:eq (1)"). click (function () {
 //Execute three animates in sequence
 $("#block2"). animate ({
 width:"90%"
 }, 1500)
 .animate ({
 fontsize:"24px"
 }, 1000)
 .animate ({
 borderrightwidth:"20px"
 }, 1000);
 });
 $("input:eq (2)"). click (function () {
 $("input:eq (0)"). click ();
 $("input:eq (1)"). click ();
 });
 $("input:eq (3)"). click (function () {
 //Restore the default settings
 $("div"). css ({
 width:"", fontsize:"", borderwidth:""
 });
 });
 });
 </script>
 <input type="button" value="block1animation">
 <input type="button" value="block2animation">
 <input type="button" value="simultaneous animation">
 <input type="button" value="reset">
 <div>block1</div>
 <div>block2</div>

The above two div blocks use three animation effects at the same time.The first animation of the first div adds the queue:false parameter, so that the first two animations are executed at the same time.Can be tested repeatedly by resetting,Familiar with the second form of animate ().

  • Previous Shell script to automatically install zookeeper
  • Next PHP debugging functions and logging functions
  • Trends