1. Display and hide of elements
Simple Show and Hide methods
<script type= "Text/javascript" >
function f1 () {
//hidden
$ ("div"). Hide ();//display:none
// document.getElementById (' id '). style.display= "None";
function F2 () {
//display
$ ("div"). Show ();//display:block
}
function F3 () {
$ ("div"). Toggle ();
}
</script>
<style type= "text/css" >
div {width:300px; height:200px; Background-color: Blue;}
</style>
<body>
<div>duck and dog</div>
<input type= "button" value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Display" onclick= "F2 ()"/> <input type=
"button" value= "Switch Effect" onclick= "F3 ()"/>
</body>
CSS supports two methods of displaying and hiding elements, that is, using visibility or display styles, they control the element to show and hide when the effect is the same, but the result is different.
The details are as follows:
2, slide effect display and hide
Speed: Set the speed of the effect (slow) normal (200) time (milliseconds)
Callback: callback function that is automatically invoked after the effect has been executed
<script type= "Text/javascript" >
function f1 () {
//hidden
$ ("div"). Slideup (3000,function () {
Alert (' I'm gone, you can see it ');
}
function F2 () {
//display
$ ("div"). Slidedown (3000,function () {
alert (' I am back Again ');
}; /display:block
}
function F3 () {
$ ("div"). Slidetoggle (1000);
$ (function () {
//cylinder sliding effect
//setinterval ("F3 ()", 1000);
});
</script>
<style type= "text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type= "button" value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Display" onclick= "F2 ()"/> <input type=
"button" value= "Switch Effect" onclick= "F3 ()"/>
</body>
3, Fade effect
Allow elements to show and hide through a certain amount of transparency
<script type= "Text/javascript" >
function f1 () {
//hidden
$ ("div"). fadeout (4000);
function F2 () {
//display
$ ("div"). FadeIn (4000);
$ ("#two"). Fadeto (2000,0.3);
Function F3 () {
$ ("div"). Fadetoggle;
</script>
<style type= "text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div id = "Two" >duck and dog</div>
<input "button" Value= "Hide" onclick= "F1 ()"/>
<input type= "button" value= "Show" onclick= "F2 ()"/> <input type=
" Button "value=" Switch Effect "onclick=" F3 ()/>
</body>
Set transparency, the transparency of Div is 30%:
4, the animation effect of the bottom method animate ()
Show () hide () and so on animation effects inside are the execution animate () method
$ (). Animate (CSS effect parameter [, TIME] [, callback function]);
A general jquery method such as CSS () will return the current jquery object after execution, so many of the methods of jquery can be chained to the call.
<script type= "Text/javascript" >
function f1 () {
//text size, text bold, div itself width and height
//font-size Background-color Color
console.log ("div");
jquery Object Call completed the CSS method itself is still a jquery object
//Description CSS method execution Complete has return this keyword
console.log ("div"). css (' font-weight ', ' Bold '). CSS ("Background-color", ' Pink '));
var jn = {' font-size ': ' 30px ', Width: ' 400px ', Height: ' 300px '};
$ ("div"). css (' font-weight ', ' bold '). CSS ("Background-color", "Pink"). CSS ("Color", "white"). Animate (jn,2000);
$ ("div"). Animate (jn,2000);
</script>
<style type= "text/css" >
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type= "button" value= "Settings" onclick= "F1 ()"/>
</body>
5. Cumulative tired-subtraction animation
If the animation is set left:500 at once, the first click of the div will move 500 pixels left, and the second click will not move. Cumulative exhaustion is a continuous move, just to the left: "500px" into left: "+=500px" or left: "-=500px" can be.
(function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "+=500px"}, 3000);
})
}) </span>
6, multiple animation
1. Execute multiple animations at the same time
The above example only controls the change of the Left property, which we control when the left property controls the height of the element to 200px
$ (function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "500px", Height: "200px"}, 3000);
})
})
2, the order to perform animation
In the example above, the elements are moved to the right and magnified height two animations are simultaneous. Now we want to move to the right and then enlarge the height, it is very simple, only to the above animate () method to write two
$ (function () {
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "500px"},3000)
. Animate ({ Height: "200px"},1000);
})
3. Integrated animation
The next step is to complete more complex animations. When you click the div element, let him move to the right while increasing his height and switching its opacity from 50% to 100%. And then let it move from top to bottom, while its width gets bigger, and when it's done
Some effect to let it fade out of the way to hide.
$ (function () {
$ ("#panel"). CSS ("opacity", 0.5);//Set opacity
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "400px", Height: "200px", Opacity: "1"},3000)
. Animate ({top: "200px", Width: "200px"},3000)
. fadeout (1000);
})
7. Animation callback function
In the example above, if you want to switch the CSS style in the last step instead of hiding the elements. So we can use the third parameter callback function of animate.
$ (function () {
$ ("#panel"). CSS ("opacity", 0.5);//Set opacity
$ ("#panel"). Click (function () {
$ (this). Animate ({left: "400px", Height: "200px", Opacity: "1"},3000)
. Animate ({top: "200px", Width: "200px"},3000, Function () {$ (this). CSS ("Border", "5px Solid Blue")})})
This adds CSS methods to the animation queue.
8, stop the animation and determine whether the animation state
1, stop the animation of elements
Stop ([Clearqueue][,gotoend]) Two are optional arguments, all Boolean types
Parameter description:
Clearqueue: Represents whether to empty an unfinished animation queue
Gotoend: Represents whether the animation being executed is skipped to the last state
The two parameters of the Stop () method can be understood by a comprehensive example:
<style type= "Text/css" > *{margin:0;padding:0;} body {font-size:13px; line-height:130% padding:60px} #panel {width:60px; border:1px solid #0050D0; height:22px
; Overflow:hidden;}
. head {padding:5px; background: #96E555; cursor:pointer;width:300px;}
. content {padding:10px text-indent:2em; border-top:1px solid #0050D0;d isplay:block; width:280px;} </style> <script src= ". /.. /..
/scripts/jquery.js "type=" Text/javascript ></script> <script type= "Text/javascript" > $ (function () { $ ("Button:eq (0)"). Click (function () {$ ("#panel"). Animate ({height: ""). Animate ({width: "the"). Hide (3000). Animate ({height: "show", Width: "Show", Opacity: "Show"},
Animate ({height: "500"}, 2000);
});
$ ("Button:eq (1)"). Click (function () {$ ("#panel"). Stop ();//stops current animation, continue next animation});
$ ("Button:eq (2)"). Click (function () { $ ("#panel"). Stop (true);//Clear all animations of elements);
$ ("Button:eq (3)"). Click (function () {$ ("#panel"). Stop (false,true)//Let the current animation go directly to the end state, continue the next animation});
$ ("Button:eq (4)"). Click (function () {$ ("#panel"). Stop (true,true);//Clear all animations of the element so that the current animation reaches the end state directly}); ) </script> <body> <button> starts a series of animations </button> <button>stop () </button> <b Utton>stop (True) </button> <button>stop (false,true) </button> <button>stop (true,true)
</button> <div id= "Panel" >
2, determine whether the element is in the animation state
When using the animate () method, avoid the phenomenon that the animation is inconsistent with the user's behavior because of the cumulative animation. Animation accumulates when a user quickly executes a animate () animation on an element.
The solution is to determine whether the element is in an animated state and to add a new animation to the element when it is not animated.
Usage:
if (!$ (Element). Is (": Animated")) {
//Add new animation
}
Through the detailed analysis of 8 kinds of jquery animation effect, play to the effect of jquery animation, I hope you like this article for the full introduction of jquery animation effect.
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
