フェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方-jsチュートリアル-php.cn

フェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方

php中世界最好的语言

リリース： 2018-06-07 14:13:04

オリジナル

2761 人が閲覧しました

今回はフェードインとフェードアウト、スライドインとスライドアウトのアニメーションを作る事例をお届けします。フェードインとフェードアウト、スライドインとスライドを作る際の注意点は何ですか？ここで実際のケースを見てみましょう。

1. フェードインとフェードアウトの効果:

この例を実行してみましょう:

2 つのボタンがあります。フェードインするにはクリックして、フェードインするには p レイヤーがあり、フェードアウトするにはクリックして、p レイヤーをフェードアウトします。 :

<!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>

ログイン後にコピー

ランニングエフェクト:

2. スライドインおよびスライドアウトエフェクト:

次のような例を実行してみましょう:

2 つのボタンがあります。クリックしてスライドインし、P レイヤーをスライドインし、クリックします。スライドアウトすると、p レイヤーがスライドアウトします:

<!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>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vuex での状態オブジェクトの使用法の概要

vuex state+mapState の実践的なプロジェクト分析

以上がフェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。