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.

1. Preparation

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">

2. Modify the image show

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:

2.1 Display pictures

$('#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.

2.2 Display pictures and add animation effects

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.

2.3 Display the picture and add a callback function

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.

3. A deeper understanding of show()

Before discussing the various show() methods, we need to understand more deeply show() method.

3.1 show() Method usage

The 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.

3.2 Speed ​​effect

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

3.3 Callback function

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.

4. Modify the image hide

hide() method is similar to the show() method and is used to hide elements. The following are some commonly used hide() methods:

4.1 Hide pictures

$('#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.

4.2 Hide pictures and add animation effects

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.

4.3 Hide the picture and add a callback function

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.

5. Summary

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!