Jquery
쉽게 역동적이고 멋진 HTML 만들기
이전 포스트에는 jquery js 소스 추가부터
정말 차근차근 진행해 보았는데요
이번 포스트에는
좀더 멋진 효과를 실습해 보겠습니다.
Jquery를 사용하기 위해
<head>태그 안에
경로를 추가해 줍니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
첫번째 예제입니다.
역시 그대로 복붙 하셔서 넣으시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bu1").click(function(){
var div = $("div"); //div 전체를 이렇게 지정하는것은 조심하셔야 합니다.
div.animate({height: '300px'}, "fast");
div.animate({width: '300px'}, "slow");
div.animate({height: '100px'}, "slow");
div.animate({width: '100px'}, "fast");
});
});
</script>
</head>
<body>
<button class="bu1" style="border:solid; width:200px">애니메이션 시작</button>
<div style="background:#abcdef; height:100px; width:100px; "></div>
</body>
</html>
먼저 왼쪽의 시작 버튼을 먼저 눌러 주시고
다음 오른쪽의 시작 버튼을 눌러보도록 하겠습니다.
누르시고 엥?? 하실테니
새로고침 해주시면 됩니다.
이전 포스트와 동일합니다.
bu1이라는 class명을 가진 버튼을 클릭했을 때,
div태그에 있는것을
높이 300으로 빨리,
너비 300으로 느리게,
다시 높이 100으로 느리게,
너비 100으로 빠르게
만드는 예제입니다.
이 코드에서 주의하실 점은
오른쪽 버튼을 누르셨을때 느끼셧을 텐데
페이지에 있는 거의 모든것들이
움직이는걸 보셨을 겁니다.
주석을 달아둔것 처럼
div태그는 많이 쓰게 되는 태그입니다.
근데 이 div태그를 통으로 싸잡아
animation을 실행하였으니,
이 페이지에 있는 div태그로 된 모든 것들이
모두 animation이 실행되어
어지럽게 되는겁니다.
항상 태그에 대해 이러한 동작을 줄 시,
class나 id 등과 같이 지정해 주시고
원하는 태그만 해당되게 해 주시는걸 추천드립니다.
다음, 두번째 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
위 코드는
특정 문자를 강요하고 싶으실때
점점 크게 나타내는 효과 입니다.
세번째 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
위 함수를 잘 보시면
document.ready 다음
button.click 다음
p.hide 다음
alert가 실행되고 있습니다.
p.hide 다음에 function을 넣어
alert를 실행해 주었는데
이를 callback 이라고 합니다.
이를 사용했을때와
사용하지 않았을 때의 차이를 보시면
아 ~ 하실겁니다.
먼저 callback을 사용했을 시 입니다.
https://ysc1230.tistory.com
그리고 callback을 사용 하지 않은 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
그리고 그 문장입니다.
https://ysc1230.tistory.com
이렇듯 callback함수는
순차적인 과정이 필요한 작업 일 경우
필수적으로 사용됩니다.
정말 간단한 jquery의 효과들을 살펴 보았는데요,
다음 포스팅에서도
추가적인 jquery 코드들을 살펴 보겠습니다.
다시 말씀드립니다.
저는 wsschools.com을 참조하여 포스팅을 하고 있습니다.
감사합니다.
'IT > jquery' 카테고리의 다른 글
| jquery | Part_1 쉽고 간단히 역동적이고 멋있는 HTML 만들기 (0) | 2018.11.22 |
|---|
