jquery achieves image gradient effect

In web design, the application of image gradient effect is becoming more and more common. It can not only increase the beauty of the web page, but also attract the user's attention. Today, we will implement the image gradient effect through jQuery.

First, in HTML, we need to insert a picture first:

<img src="image.jpg" alt="这是一张图片" id="image">

Then, in JavaScript, we need to store the src attribute of the picture into a variable:

var image = $("#image");
var src = image.attr("src");

Then, we set the src attribute of the image to an empty string so that the image appears blank:

image.attr("src", "");

Next, use jQuery to preload the image:

$("<img>").attr("src", src).load(function() {
  // 图片加载完成后执行以下代码
  image.fadeOut(function(){
    $(this).attr("src", src).fadeIn();
  });
});

In the above In the code, we create a new img tag and set the image address to the previously saved src variable. After the new image is loaded, we perform a fade out effect on the original image, then set the src attribute of the new image to the previously saved image address, and use the fadeIn effect to make the new image appear slowly.

Finally, we need to put the entire code into $(document).ready() to ensure that the code can be executed after the document is loaded:

$(document).ready(function() {
  var image = $("#image");
  var src = image.attr("src");
  image.attr("src", "");
  $("").attr("src", src).load(function() {
    image.fadeOut(function(){
      $(this).attr("src", src).fadeIn();
    });
  });
});

Through the above code, we successfully Use jQuery to achieve the image gradient effect, making the web page more beautiful and attracting the user's attention.

The above is the detailed content of jquery achieves image gradient effect. For more information, please follow other related articles on the PHP Chinese website!