Home > Article > Web Front-end > How to achieve fade in and fade out effect in jQuery

How to achieve fade in and fade out effect in jQuery

清浅Original: 2019-02-12 14:26:013515browse

There are four methods in jQuery: fadeIn(), fadeOut(), fadeToggle(), fadeTo(). Through these four methods, you can achieve the effect of fading in and out.

What I want to share today is how Using jQuery to achieve the fade-in and fade-out effect has a certain reference effect. I hope it will be helpful to everyone

[Tutorial recommendation: jQuery Tutorial】

jQuery has four fade methods, namely fadeIn(), fadeOut(), fadeToggle(), fadeTo(). Next, I will introduce these in detail in the article. How to achieve the fade-in and fade-out effect using this method

fadeIn() method

is mainly used to fade in hidden elements. It has two parameters:

speed: Indicates the duration of the effect, which can be "slow", "fast" or a customized time value. It is an optional parameter

callback: Indicates the name of the function executed after the fade-in effect is completed

fadeOut() method

is mainly used to fade out the visible element, its parameter value is the same as the value of fadeIn

fadeToggle() method

This method can switch between fadeIn() and fadeOut() methods

If the element has faded out, fadeToggle() will add a fade-in effect to the element

If the element has faded in, fadeToggle() will add a fade-out effect to the element

fadeTo() method

fadeTo() method allows gradient to a given opacity (value between 0 and 1)

In addition to the speed and callback functions, the fadeTo method In addition, there is an additional required opacity parameter, which is used to set the opacity of the fade-in and fade-out effect

Example sharing:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img  src="./images/22.jpg" id="img" alt="How to achieve fade in and fade out effect in jQuery" >
</body>
</html>

Rendering:

How to achieve fade in and fade out effect in jQuery

Summary: The above is the entire content of this article. I hope this article can help you learn how to achieve the fade-in and fade-out effect through jQuery

Note: This article refers to the jQuery Fade In and Fade Out section in the jQuery Tutorial Manual

The above is the detailed content of How to achieve fade in and fade out effect in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use find methodNext article：How to use find method

See more

How to achieve fade in and fade out effect in jQuery

Related articles