JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<button id="btnAni1">show</button>
<button id="btnAni2">hide</button>

<button id="btnAni3">fadeIn</button>
<button id="btnAni4">fadeOut</button>

<button id="btnAni5">slideUp</button>
<button id="btnAni6">slideDown</button>


<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" data-nav="menu1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

CSS

#gnb{position:relative;padding:10px;}
#gnb a{border:1px solid red}
#gnb .btn_nav1{border-color:blue;}
#gnb .btn_nav2{border-color:green;}
#gnb .btn_nav2{border-color:red;}

JavaScript

/***** [ 애니메이션 효과 다루기 ] *****/

// 보이고, 숨기기
$('#btnAni1').on('click', function(){
	$('#gnb').show('300', function(){
  	alert('show');
  });
});
$('#btnAni2').on('click', function(){
	$('#gnb').hide('300', function(){
  	alert('show');
  });
});
// toggle (http://api.jquery.com/toggle/)

// fade효과
$('#btnAni3').on('click', function(){
	// http://api.jquery.com/fadeIn/
	$('#gnb').fadeIn('slow', function(){
  	alert('fadeIn');
  });
});
$('#btnAni4').on('click', function(){
	// http://api.jquery.com/fadeOut/
	$('#gnb').fadeOut();
});
// fadeToggle (http://api.jquery.com/fadeToggle/)


// slide 효과 
$('#btnAni5').on('click', function(){
	// http://api.jquery.com/slideUp/
	$('#gnb').slideUp();
});
$('#btnAni6').on('click', function(){
	// http://api.jquery.com/slideDown/
	$('#gnb').slideDown();
});
// slideToggle (http://api.jquery.com/slideToggle/)


// 사용자 animation (http://api.jquery.com/animate/)