Home > Article > Web Front-end > jquery modify picture show
With the development and progress of Internet technology, pictures play an increasingly important role in our lives, and jQuery, as a popular JavaScript library, can help us easily modify the display effect of pictures. This article will introduce how to use jQuery to modify the image show.
Before we start, we need to do some preparations.
1.1 Download jQuery
First you need to go to the [official website](https://jquery.com/download/) to download the latest version of jQuery and introduce it into the project . For example:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
1.2 Add a picture
Add a picture in HTML and add an ID attribute to it to facilitate our operation in jQuery. For example:
<img src="img/photo.jpg" id="photo">
show()
is a method in jQuery for displaying elements. We can use it to modify the display of images.
The following are some commonly used show()
methods:
$('#photo').show();
This code will display pictures. If the image is hidden, it will be shown. If the image is already displayed, no action will be taken.
Some parameters can be added to the show()
method to add animation effects.
$('#photo').show('slow'); $('#photo').show('fast');
These two pieces of code will display the image at slow speed and fast speed respectively, and add a simple animation effect.
You can add a callback function in the show()
method to perform other operations after the display is completed.
$('#photo').show('slow', function() { console.log('图片已经显示'); });
This code will display the image at a slow speed and output a string to the console after the display is completed.
show()
Before discussing the various show()
methods, we need to understand more deeply show()
method.
show()
Method usageThe usage of the show()
method in jQuery is very simple. Elements can be selected through a selector and the show()
method can be called to display the element.
$(selector).show(speed, callback)
Parameter explanation:
selector
: Required, the element to be displayed. speed
: Optional, specifies the speed effect to be used. callback
: Optional, specifies the function to be executed when the animation is completed. By specifying the speed
parameter in the show()
method, you can control the speed of the animation. The unit of speed can be milliseconds or "slow" or "fast" strings, or it can be customized. For example:
$('#photo').show(1000); // 以1秒速度显示图片 $('#photo').show('slow'); // 以慢速显示图片,相当于400ms $('#photo').show('fast'); // 以快速显示图片,相当于200ms $('#photo').show('medium'); // 以中等速度显示图片,相当于600ms $('#photo').show('veryfast'); // 以极快速度显示图片,相当于50ms
The callback function is an optional parameter that can perform other operations after the animation is completed. For example:
$('#photo').show('slow', function() { console.log('图片已经显示'); });
This code will display the image at a slow speed and output a string to the console after the display is completed.
hide()
method is similar to the show()
method and is used to hide elements. The following are some commonly used hide()
methods:
$('#photo').hide();
This code will hide pictures. If the image is already hidden, no action will be taken. If the image is already displayed, it will be hidden.
You can add some parameters to the hide()
method to add animation effects.
$('#photo').hide('slow'); $('#photo').hide('fast');
These two pieces of code will hide the image at slow and fast speeds respectively, and add a simple animation effect.
You can add a callback function in the hide()
method to perform other operations after the hiding is completed.
$('#photo').hide('slow', function() { console.log('图片已经隐藏'); });
This code will hide the image slowly and output a string to the console after the hiding is completed.
This article introduces how to use jQuery to modify the image show, including the commonly used show()
method, and an in-depth understanding of show()
method, and how to hide images using the hide()
method. When using jQuery, practice makes perfect!
The above is the detailed content of jquery modify picture show. For more information, please follow other related articles on the PHP Chinese website!