More than 5 years have passed since last update.

fadeIn addClassを使用したスライドインアウト

jQuery

Last updated at 2019-11-12Posted at 2019-11-12

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SlideIn_Out</title>
<link rel="stylesheet" href="assets/style.css">
<!-- グーグルからライブラリを取得 -->
<script <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
 
<button class="button-fade">フェードイン</button>
<div class="fade youso">
  <p>Fade In !</p>
  <p>Fade In !</p>
  <p>Fade In !</p>
</div>

<button class="button-slidein">スライドイン</button>
<div class="showDown youso">
  <p>Fade In !</p>
  <p>Fade In !</p>
  <p>Fade In !</p>
</div>

<button class="button-slideout">スライドアウト</button>
<div class="showUp2 youso">
  <p>Fade Out !</p>
  <p>Fade Out !</p>
  <p>Fade Out !</p>
</div>

<button class="button-repeat">インアウト</button>
<div class="showDown3 youso">
  <p>Fade Out !</p>
  <p>Fade Out !</p>
  <p>Fade Out !</p>
</div>

<script>
$(function() {
  //'フェードイン'をクリックしたら発動
  $('.button-fade').click(function() {
    // 0.5秒でフェードイン
    $('.fade').fadeIn('0.5');
    //フェードアウトしたい場合はfadeOut('任意');
  });
  
  //'スライド'をクリックしたら発動
  $(".button-slidein").click(function(){
  //.showUpクラスを追加することで.slideのcss設定を上書き
  	$(".showDown").addClass("showUp");
  });
  
  //'フェードアウト'をクリックしたら発動
  $(".button-slideout").click(function(){
  //.showUpクラスを追加することで.slideのcss設定を上書き
  	$(".showUp2").addClass("showDown2");
  });
  
  //'インアウト'をクリックしたら発動
  $(".button-repeat").click(function(){
  //.toggleClassで動作を繰り返すことができる
  	$(".showDown3").toggleClass("showUp3");
  });
  	
});
</script>

</body>
</html>

/* フェードイン */
.fade{
	display: none;
}

/* スライドイン */
.showDown{
  opacity: 0;
  transition: .7s;
  margin-top: 60px;
}
.showUp{
  opacity: 1;
  margin-top: 0;
}

/* スライドアウト
   cssの記述順をスライドインの場合と逆にしなくてはいけない
*/
.showUp2{
  opacity: 1;
  transition: .7s;
  margin-top: 0;
}
.showDown2{
  opacity: 0;
  margin-top: 60px;
}

/* インアウト */
.showDown3{
  opacity: 0;
  transition: .7s;
  margin-top: 60px;
}
.showUp3{
  opacity: 1;
  margin-top: 0;
}

button{
	display:block;
}
.youso{
	width: 150px;
	height: 150px;
	overflow: hidden;
	background-color: pink;
}

実用性の高いslideUp,slideDownについては以下を参照
slideUp slideDown

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up