Comment créer des cas d'animation avec fondu entrant, fondu sortant et coulissant-js tutoriel-php.cn

Comment créer des cas d'animation avec fondu entrant, fondu sortant et coulissant

php中世界最好的语言

Libérer： 2018-06-07 14:13:04

original

2728 Les gens l'ont consulté

Cette fois, je vais vous présenter un cas sur la façon de créer des animations de fondu d'entrée et de sortie, ainsi que de diapositive d'entrée et de sortie. Quelles sont les précautions à prendre pour créer des fondus d'entrée et de sortie et des diapositives d'entrée et de sortie. coulissant ? Voici un cas pratique, jetons un coup d'œil.

1. Effet de fondu entrant et sortant :

Faisons cet exemple :

Il y a deux boutons, cliquez pour faire un fondu entrant, il y a un p Le calque apparaît, cliquez pour disparaître, le calque p disparaît :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery淡入淡出</title>
    <style>
      .p{width: 300px;height: 300px;background-color: red;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".p").fadeIn();
        });
        $("#btna").click(function(){
          $(".p").fadeOut();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击淡入"/>
     <input type="button" id="btna" value="点击淡出"/>
     <p class="p">
      我是一个p块哦！！！！！
     </p>
  </body>
</html>

Copier après la connexion

Effet de course :

2. Glisser et glisser effet de sortie :

Faisons cet exemple :

Il y a deux boutons, cliquez pour glisser vers l'intérieur, et un calque p glisse vers l'intérieur, cliquez pour glisser vers l'extérieur, et le calque p glisse vers l'extérieur :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery滑入滑出</title>
    <style>
      .p{width: 300px;height: 300px;background-color: green;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".p").slideDown();
        });
        $("#btna").click(function(){
          $(".p").slideUp();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击滑入"/>
     <input type="button" id="btna" value="点击滑出"/>
     <p class="p">
      我是一个p块哦！！！！！
     </p>
  </body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Un résumé de l'utilisation des objets d'état dans vuex

Analyse de vuex state+mapState pratique projets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!