Home > Developer > Web Develop

jquery effect Function---authority

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

jquery can create effects such as hiding, displaying, toggling, swiping, and customizing Animations.

JQuery Hide <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ ("p"). Click (function () {
$ (this). Hide ();
});
});
</script>
<body>
<p> If you click on me, I will disappear. </p>
<p> Click me and I'll disappear. </p>
<p> also want to click on me oh. </p>
</body>
jQuery slidetoggle <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script
<script type= "text/javascript" >
$ (document). Ready (function () {
$ (". flip"). Click (function () {
    $ (". panel"). slidetoggle ("slow");
 });
});
</script>
 
<style type= "text/css" >
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
Background: #e5eecc;
Border:solid 1px #c3c3c3;
}
Div.panel
{
height:120px;
display:none;
}
</style>
 
<body>
 
<div class= "panel";
<p>w3school-the Leading web technology tutorial site </p>
<p> in w3school, you can find all the Web building tutorials you Need. </p>
</div>
 
<p class= "flip" > Click here </p>
 
</body>
jQuery fadeTo <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script
<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
     $ ("#div1"). fadeTo ("slow", 0.15);
    $ ("#div2"). fadeTo ("slow", 0.4);
    $ ("#div3"). fadeTo ("slow", 0.7);
 });
});
</script>

<body>

<p> demonstrates the FadeTo () method with different Parameters. </p>
<button> Click here to make three rectangles fade out of </button>
<br><br>
<div id= "div1" style= " width:80px;height:80px; " ></div>
<br>
<div id= "div2" style= "width:80px;height:80px;" ></div>
<br>
<div id= "div3" style= "width:80px;height:80px;" ></div>

</body>
jQuery animate <! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" ></script
<script>
$ (document). Ready (function () {
  $ ("button"). Click (function () {
     VAR div=$ ("div");
    div.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");
    div.animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");
    div.animate ({height: ' 100px ', opacity: ' 0.4 '}, "slow");
    div.animate ({width: ' 100px ', opacity: ' 0.8 '}, "slow");
 });
});
</script>
 
<body>

<button> start animation </button>
<p> by default, the location of all HTML elements is static and cannot be Moved. To manipulate the location, remember to first set the Element's CSS position property to relative, fixed, or Absolute. </p>
<div style= "background: #98bf21; height:100px;width:100px;position:absolute;"
</div>

</body>

jquery Hidden and displayed

With the Hide () and show () two functions, jquery supports hiding and displaying HTML elements:

$ ("#hide"). Click (function () {$ ("p"). Hide ();}); $ ("#show"). Click (function () {$ ("p"). show ();});
jquery Toggle
The JQuery toggle () function uses the show () or hide () function to toggle the visible state of an HTML Element.

Hides the displayed elements, showing the hidden elements.

$ (selector). Toggle (speed,callback)
$ ("button"). Click (function () {$ ("p"). Toggle ();});
JQuery Sliding functions-slidedown, slideup, slidetoggle

JQuery has the following sliding functions:

$ (selector). slidedown (speed,callback) $ (selector). slideup (speed,callback) $ (selector). slidetoggle (speed,callback )

The speed parameter can set these values: "slow", "fast", "normal", or MILLISECONDS.

the Callback parameter is the name of the function that is executed after the function completes. You will learn more about the callback parameters in the sections below in this Tutorial.

Slidedown () Instance 
$ (". flip"). Click (function () {$ (". panel"). slidedown ();});
Slideup () Instance 
$ (". flip"). Click (function () {$ (". panel"). slideup ()})
Slidetoggle () Instance 
$ (". flip"). Click (function () {$ (". panel"). slidetoggle ();});
Function
Description
$ (selector). Hide () Hide selected elements
$ (selector). Show () Show selected elements
$ (selector). Toggle () Toggle (between Hide and Show) selected element
$ (selector). Slidedown () Swipe down (show) selected elements
$ (selector). Slideup () Swipe up (hide) selected elements
$ (selector). Slidetoggle () Toggle on selected elements swipe up and swipe down
$ (selector). fadeIn () Fade in Selected element
$ (selector). FadeOut () Fade Out selected elements
$ (selector). FadeTo () Fades the selected element to a given opacity
$ (selector). Animate () Perform a custom animation on the selected element

jquery effect Function---authority

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery delay function jquery delay function example jquery round function jquery sleep function jquery string format function jquery timer function example sleep function in jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More