Jquery entry [1]-Constructor
Jquery entry [2]-Selector
Jquery entry [3]-Events
Getting started with jquery [4]-chained code
Getting started with jquery [5]-Ajax
Jquery entry [6]-Animation
Jquery directly uses a variety of animations. It is often encapsulated into various methods, such as show ()/hide ()/slidedown ()/fadein (). For more information, see effects.
The most flexible method is the animate (Params, [duration], [easing], [callback]) method. For details, refer to: Animate
Params is the animation running result and can be a variety of style attributes. jquery will gradually change the current state of the object to the value specified by the Params parameter within the time specified by duration. For example: $ ("# Go"). Click (function (){
$ ("# Block"). animate ({
Width: "70% ",
Opacity: 0.4,
Marginleft: "0.6in ",
Fontsize: "3em ",
Borderwidth: "10px"
},1500 );
});
Params can also be relative data: $ ("# Right"). Click (function (){
$ (". Block"). animate ({"Left": "+ = 50px"}, "slow ");
});
$ ("# Left"). Click (function (){
$ (". Block"). animate ({"Left": "-= 50px"}, "slow ");
});
You can use the stop () function to pause an object before executing the animation. Selector: animated can be used to determine whether an object is in the animation running state.
The following is an example from the official website: <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"
Http://www.w3.org/TR/html4/loose.dtd>
<HTML>
<Head>
<SCRIPT src = "http://code.jquery.com/jquery-latest.js"> </SCRIPT>
<SCRIPT>
$ (Document). Ready (function (){
$ ("# Show"). Click (function (){
VaR n = $ ("Div"). Queue ("FX ");
$ ("Span"). Text ("queue length is:" + N. Length );
});
Function Runit (){
$ ("Div"). Show ("slow ");
$ ("Div"). animate ({left: '+ = 100'}, 200 );
$ ("Div"). slidetoggle (1000 );
$ ("Div"). slidetoggle ("fast ");
$ ("Div"). animate ({left: '-= 100'}, 200 );
$ ("Div"). Hide ("slow ");
$ ("Div"). Show (1200 );
$ ("Div"). slideup ("normal", Runit );
}
Runit ();
});
</SCRIPT>
<Style>
Div {margin: 3px; width: 40px; Height: 40px;
Position: absolute; left: 0px; top: 30px;
Background: green; display: none ;}
Div. newcolor {Background: Blue ;}
SPAN {color: red ;}
</Style>
</Head>
<Body>
<Button id = "show"> show length of queue </button>
<Span> </span>
<Div> </div>
</Body>
</Html>
The effect is a changing square, because the last animation $ ("Div"). slideup ("normal", Runit) is executed and then the Runit method is called, so the Animation continues to loop.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
