Description of the animate () parameter:
The animate () method executes the Custom Animation of the CSS property set.
This method uses the CSS style to change an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect.
Only numeric values can be used to create animations (such as "margin: 30px "). The string value cannot be used to create an animation (for example, "background-color: red ").
PS: however, if you reference the latest jquery ui framework, attributes such as backgroudColor and color can also achieve gradient.
PS: Use "+ =" or "-=" to create relative animations ).
First, you still need to reference the jquery framework.
Let's take a look at the Code:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body>
<Div style = "border: 5px #666 solid; width: 500px; height: 350px; overflow: hidden;">
<Div id = "box">
<Div style = "width: 500px; height: 350px; background-color: #0F0;"> One </div>
<Div style = "width: 500px; height: 350px; background-color: # 00F;"> Two </div>
<Div style = "width: 500px; height: 350px; background-color: #696;"> Three </div>
</Div>
</Div>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var Top =-350; // defines an upward moving distance, which is equal to the height of your image or DIV
Var Time = 500; // define a speed
Function move (){
$ ("# Box"). animate ({"margin-top": Top}, Time); // The animate method can only gradient numeric values.
Top + =-350; // increase the height of an image at a time.
If (Top =-1050) // determines if the total height is greater than the total height of your DIV or image
{
Top = 0; // set the distance back to 0
Time = 400; // speed up moving
}
Else
{
Time = 500; // otherwise slow down
}
}
SetInterval (move, 3000); // execute move () once every 3 seconds ()
})
</Script>
</Body>
</Html>
The js part can also achieve a rollback effect:Copy codeThe Code is as follows: $ (document). ready (function (){
Var Top =-350;
Var Time = 500;
Var more =-50;
Function move (){
$ ("# Box"). animate ({"margin-top": Top + more}, Time );
$ ("# Box"). animate ({"margin-top": Top}, 300 );
Top + =-350;
If (Top ==- 1050)
{
Top = 0;
More = 50;
Time = 400;
}
Else
{
Time = 500;
More =-50;
}
}
SetInterval (move, 3000 );
})
