Home > Article > Web Front-end > What are the jquery animation functions?
What are the jquery animation functions?
- 青灯夜游Original
- 2022-05-16 17:04:212855browse
There are 17 types of jquery animation functions: 1. animate(), used to apply custom animations to selected elements; 2. hide(), used to hide selected elements; 3. show(), Used to display selected elements; 4. fadeOut(), used to hide elements by setting opacity; 5. fadeTo() and so on.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery animation functions
The table below lists all the jQuery methods used to create animation effects.
| Method | Description |
|---|---|
| animate() | Apply to the selected elements" Customized "animation |
| clearQueue() | Remove all queued functions (not yet running) from the selected elements |
| delay() | Set a delay for all queued functions (not yet run) of the selected elements |
| dequeue() | Remove Next queue the function, and then execute the function |
| fadeIn() | Gradually change the opacity of the selected element from hidden to visible |
| fadeOut() | Gradually change the opacity of the selected element, from visible to hidden |
| fadeTo() | Fade the selected element The element gradually changes to the given opacity |
| fadeToggle() | Toggle between fadeIn() and fadeOut() methods |
| finish() | Stop, remove and complete all queued animations for the selected element |
| hide() | Hide is Select element |
| queue() | Show the queue function of the selected element |
| show() | Display the selected element |
| slideDown() | Slide and display the selected element by adjusting the height |
| slideToggle() | Switching between slideUp() and slideDown() methods |
| slideUp() | Slide and hide the selected element by adjusting the height |
| stop() | Stop the currently running animation on the selected element |
| toggle() | Switching between hide() and show() methods |
Here are some commonly used animation functions.
1. animate()
The animate() method performs custom animations of CSS property sets.
This method changes an element from one state to another through CSS styles. CSS property values change gradually, allowing you to create animated effects.
Only numeric values can be animated (such as "margin:30px"). String values cannot be animated (such as "background-color:red").
Tip: Please use " =" or "-=" to create relative animations.
Example: Apply animation to an element by changing its height:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({
height: "300px"
});
});
$("#btn2").click(function() {
$("#box").animate({
height: "100px"
});
});
});
</script>
</head>
<body>
<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
##2, hide(), show() and toggle( )
- hide() method hides the selected elements.
- show() displays the selected element
- toggle(): switch between hide() and show() methods
element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
});
$(".btn2").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>
</html>
3, slideUp(), slideDown() And slideToggle()
- slideUp() method: Hide the selected element in a sliding manner.
- slideDown() method: Display the selected element in a sliding manner.
- slideToggle() method: switching between slideUp() and slideDown() methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp();
});
$(".btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>
</body>
</html>
4, fadeIn(), fadeOut() and fadeToggle()
- fadeIn () method gradually changes the opacity of the selected element from hidden to visible (fading effect).
- fadeOut() method gradually changes the opacity of the selected element from visible to hidden (fade effect).
- fadeToggle(): Switch between fadeIn() and fadeOut() methods
Element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>
5, fadeTo()
fadeTo() method gradually changes the opacity of the selected element to the specified value (faded effect).<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").fadeTo(1000, 0.4);
});
});
</script>
</head>
<body>
<button>逐渐改变P元素的不透明度</button>
<p>这是一个段落。</p>
</body>
</html>
jQuery video tutorial, web front-end video 】
The above is the detailed content of What are the jquery animation functions?. For more information, please follow other related articles on the PHP Chinese website!