ホームページ > 記事 > ウェブフロントエンド > フェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方
フェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方
- php中世界最好的语言オリジナル
- 2018-06-07 14:13:042699ブラウズ
今回はフェードインとフェードアウト、スライドインとスライドアウトのアニメーションを作る事例をお届けします。フェードインとフェードアウト、スライドインとスライドを作る際の注意点は何ですか？ここで実際のケースを見てみましょう。
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 state+mapState の実践的なプロジェクト分析
以上がフェードインとフェードアウト、スライドインとスライドアウトのアニメーションケースの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。