jQuery achieves fade-in and fade-out effects

Before using jQuery to complete the fade-in and fade-out effect, let's first get to know some codes:

fadeIn([ speed , [easing] , [fn] ]), parameters are optional
fadeOut([ speed , [easing] , [fn] ]), parameters are optional
Fade in and out switch fadeToggle([ speed , [easing] , [fn] ]), parameters can be omitted
Modify the transparency fadeTo([ [speed] , opacity , [easing] , [fn] ]). Note that the speed and transparency must be written here.

speed is speed
Easing is the transition effect
fn is the callback function

Then let's put the above code into the overall code to see the effect

The complete code is as follows

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Wellfancy</title>
    <style>
        div {
   margin: 10px;
   padding: 10px;
   width: 100px;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
 
<body>
    <button>Fade-in effect</button>
    <button>Fade out effect</button>
    <button>Fade in and out switch</button>
    <button>Modify transparency</button>
    <div>
  <img src="images/1.jpg" style="width: 280px;">
 </div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                $("div").fadeOut(1000);
 
            })
            $("button").eq(2).click(function() {
                $("div").fadeToggle(1000);
 
            });
            $("button").eq(3).click(function() {
                $("div").fadeTo(1000, 0.5);
 
            });
 
        });
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Native js and jquery to achieve the fade-in and fade-out effect of image carousel
Examples of fade-in and slide-out effects implemented with jQuery
Simple implementation of jQuery fade-in and fade-out effect
jQuery implements universal version of mouse fade-in and fade-out effect
jQuery fade in and out, expand and shrink menu implementation code
Text fade-in and fade-out effect based on jQuery
Implementing fade-in and fade-out effect carousel based on jQuery
Basic practice of fade-in and fade-out special effects based on Jquery
jQuery news broadcast scrolling and fade-in and fade-out effect example
jQuery fades elements in and out to make the effect more vivid

<<: MySQL 8.0.18 stable version released! Hash Join is here as expected

>>: Detailed tutorial on migrating the home directory to a new partition under Ubuntu