recherche

Maison >interface Web >js tutoriel >Comment créer des cas d'animation avec fondu entrant, fondu sortant et coulissant

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

php中世界最好的语言
php中世界最好的语言original
2018-06-07 14:13:042761parcourir

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>

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Problèmes de traitement inter-domaines Vue (tutoriel détaillé)Article suivant：Problèmes de traitement inter-domaines Vue (tutoriel détaillé)

Articles Liés

Voir plus