1. Default display and hide methods
1. show() method: the selected elements can be displayed, and animation effects can be used to achieve a smooth transition. It can accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="display: none"></div>
<script>
$(document). ready(function() {
$('.box').show(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box and use the show() method to display it. Initially this element is hidden due to display: none set in the initial style. In the show() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be displayed with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
2. hide() method: the selected element can be hidden, and animation effects can be used to achieve a smooth transition. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box"></div>
<script>
$(document). ready(function() {
$('.box').hide(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box, and use the hide() method to hide it. In the hide() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be hidden with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
3. toggle() method: The selected element can be switched between display and hiding, and animation effects can also be used to achieve a smooth transition. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="display: none"></div>
<script>
$(document). ready(function() {
$('.box').click(function() {
$(this).toggle(1000, function() {
console.log('animation complete');
});
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box and bind a click event to it. When the user clicks on this element, use the toggle() method to toggle the element between showing and hiding. In the toggle() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be switched with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
2. Slide show and hide methods
1. slideDown() method: The selected element can be displayed through the downward animation effect. It can accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="height: 0; overflow: hidden"></div>
<script>
$(document). ready(function() {
$('.box').slideDown(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, select the element with the class name box through the $ function, and use the slideDown() method to display it through the animation effect of expanding downward. Initially this element is hidden due to height: 0 and overflow: hidden set in the initial style. In the slideDown() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be expanded with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
2. slideUp() method: the selected element can be hidden through the animation effect of shrinking upward. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box"></div>
<script>
$(document). ready(function() {
$('.box').slideUp(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box, and use the slideUp() method to hide it through the upward shrinking animation effect. In the slideUp() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be shrunk with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
3. slideToggle() method: The selected element can be switched between showing and hiding, and an up or down animation effect can also be used to achieve a smooth transition. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="height: 0; overflow: hidden"></div>
<script>
$(document). ready(function() {
$('.box').click(function() {
$(this). slideToggle(1000, function() {
console.log('animation complete');
});
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box and bind a click event to it. When the user clicks on the element, use the slideToggle() method to toggle the state of the element between showing and hiding, and achieve a smooth transition by animating up or down. In the slideToggle() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that elements need to be switched with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
3. Fade in and fade out display and hide methods
1. fadeIn() method: The selected element can be displayed through the fade-in animation effect. It can accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="display: none"></div>
<script>
$(document). ready(function() {
$('.box').fadeIn(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, select the element with the class name box through the $ function, and use the fadeIn() method to display it through the fade-in animation effect. Initially this element is hidden due to display: none set in the initial style. In the fadeIn() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be faded in with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
2. fadeOut() method: the selected element can be hidden through the animation effect of fading out. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box"></div>
<script>
$(document). ready(function() {
$('.box').fadeOut(1000, function() {
console.log('animation complete');
});
});
</script>
The above code means: when the document is loaded, select the element with the class name box through the $ function, and use the fadeOut() method to hide it through the fade-out animation effect. In the fadeOut() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that the element needs to be faded out with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
3. fadeToggle() method: The selected element can be switched between showing and hiding, and the animation effect of fading in or out can also be used to achieve a smooth transition. It can also accept multiple parameters, where the first parameter is the duration of the animation, the second parameter is the easing type of the animation, and the third parameter is the callback function after the animation is completed.
<div class="box" style="display: none"></div>
<script>
$(document). ready(function() {
$('.box').click(function() {
$(this). fadeToggle(1000, function() {
console.log('animation complete');
});
});
});
</script>
The above code means: when the document is loaded, use the $ function to select the element with the class name box and bind a click event to it. When the user clicks on this element, use the fadeToggle() method to toggle the state of the element between showing and hiding, and achieve a smooth transition with a fade-in or fade-out animation. In the fadeToggle() method, an animation duration of 1000 milliseconds and a callback function after completion are passed in, indicating that elements need to be switched with the default easing type within 1000 milliseconds, and the callback function is executed after the animation is completed.
jQuery effect function
| Method | Description |
|---|---|
| animate() | Apply “automatic” to the selected element Definition” |
| clearQueue() | Remove all queued functions (not yet run) for the selected elements |
| delay() | Set a delay for all queued functions (not yet run) on selected elements |
| dequeue() | Run the next queue function of the selected element |
| fadeIn() | Gradually change the opacity of the selected element from hidden to visible |
| fadeOut() | Fade out by Select the opacity of the element, from visible to hidden |
| fadeTo() | Gradually change the selected element to the given opacity |
| hide() | Hide selected elements |
| queue () | Display the queuing function of the selected element |
| show() | Show selected elements |
| slideDown() | Slide to display the selected element by adjusting the height |
| slideToggle() | Switch between sliding to hide and slide to show selected elements |
| slideUp() | By adjusting the height to Slide to hide the selected element |
| stop() | Stop running animation on selected elements |
| toggle() | Switch between hiding and displaying the selected elements |