공통 적용 코드 COMMON CODE
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
</html><head></head>
사이에 사용할 라이브러리들을 불러옵니다.
제이 쿼리(jquey) addClass() 사용하기
<!doctype html>
<html lang="en">
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
<body>
<div></div>
<script>
$( "div" ).click(function() {
$( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>
</body>
</html>위 제이 쿼리 코드는 해당 DIV 영역 클릭시 효과가 변하는 것을 확인 할 수 있습니다.
제이 쿼리(jquey) Blind Effect 블라인드 효과 사용하기
<!doctype html>
<html lang="en">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "blind" );
});
</script>
</body>
</html>위 제이 쿼리 소스를 적용하면 토글 영역을 클릭 할때마다 블라인드가 나타났다가 사라지는 효과를 볼 수 있습니다.
제이 쿼리(jquery) Bounce Effect 바운스 효과 적용하기
<html>
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
</body>
</html>위 제이 쿼리 코드를 적용하면 박스가 바운스 효과를 나타내면서 사라지고 나타나는 것을 확인 할 수 있습니다.
제이 쿼리(jquery) Clip Effect 클립효과 적용하기
<!doctype html>
<html lang="en">
<head>
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "clip" );
});
</script>
</body>
</html>위 코드를 적용하면 DIV 영역을 클릭할때마다 clip 효과를 확인 할 수 있습니다.
이상으로
제이 쿼리(jquery) addClass() , Blind Effect, Bounce Effect, Clip Effect 등 적용방법에 대해서 마치겠습니다.