web front-end entry to reality: jQuery fades in and out

In some special effects of jQuery, fade-in and fade-out of elements can be achieved by four methods: fadeIn(), fadeOut(), fadeToggle() and fadeTo(), which are described below.

jQuery fadeIn() is used to fade in elements that have been hidden, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery Fade in</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;display:none;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery Just introduce yourself. Here I am. jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeIn();
                     $("#div2").fadeIn(1000);
                      $("#div3").fadeIn("slow");
           });
           });
      </script>
</head>
<body>
     <p>Example demonstrates fadeIn()The effect of different parameters.</p>
     <button>Click fade in div Elements.</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>

jQuery fadeOut() is used to fade in elements that have been hidden, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery Fade out</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery Just introduce yourself. Here I am. jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeOut();
                     $("#div2").fadeOut(1000);
                      $("#div3").fadeOut("slow");
           });
           });
      </script>
</head>
<body>
     <p>Example demonstrates fadeIn()The effect of different parameters.</p>
     <button>Click fade out div Elements.</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>

The jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.

Small partners who are interested in Web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? Look at how our predecessors went ahead in the world of programming! Keep updating the latest teaching and learning methods (web front-end system learning route, detailed front-end project teaching videos), want to learn the front-end of the web, or transfer, or college students, as well as work to enhance their ability, small partners who are learning are welcome to join. We'll go with each other. Front end, front end, front end

If the element fades out, fadeToggle() adds a fade-in effect to the element.

If the element has faded in, fadeToggle() adds fade-out effect to the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()switch</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery Just introduce yourself. Here I am. jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeToggle();
                     $("#div2").fadeToggle(1000);
                      $("#div3").fadeToggle("slow");
           });
           });
      </script>
</head>
<body>
     <p>Example demonstrates fadeToggle() The effect of different parameters.</p>
     <button>Click Toggle div Elements.</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>

The jQuery fadeTo() method allows the gradient to a given opacity (values between 0 and 1).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeTo transparency</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery Just introduce yourself. Here I am. jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeTo("slow",0.15);
                 $("#div2").fadeTo("slow",0.4);
                  $("#div3").fadeTo("slow",0.7);
           });
           });
      </script>
</head>
<body>
     <p>Example demonstrates fadeTo The effect of different parameters.</p>
     <button>click fadeTo transparency div Elements.</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>
web Front-end development learning Q-q-u-n:  767273102 ´╝îShare learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)

Tags: JQuery Javascript Programming

Posted on Tue, 10 Sep 2019 01:13:22 -0700 by tcl4p