가카리의 공부방

애니메이션를 지연하고 싶다면 delay 메소드를 이용하면 됩니다. 사용 방법은 소스를 보시면 바로 알 수 있습니다.(첫번째 파라미터가 delay 되는 시간 ms단위) 아래 소스중 each 메소드는 요소만큼 반복하는 메소드입니다. 각 인덱스는 index 파라미터에 의해서 알수있구요. 소스 DOCTYPE html> div{ width: 100px; height: 100px; background-color: orange; position: relative; } $(document).ready(function(){ $('div').each(function (index){ //(index * 500)초 후 animate() 메서드를 실행합니다. $(this).delay(index * 500).animate({ l..

stop 메소드는 효과 및 애니메이션을 정지하는 메소드입니다. 그리고 다음 2가지 파라미터를 가집니다. clearQueue와 goToEnd인데 첫 번째 파라미터를 true로 설정하면 clearQueue 메소드를 실행하는 것과 같은 효과를 냅니다. 두 번째 파라미터 인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춥니다. 소스코드 DOCTYPE html> div{ width: 100px; height: 100px; background-color: orange; position: relative; } $(document).ready(function(){ //이벤트를 연결합니다. $('button').click(function(){ //변수 선언 var html =..

애니메이션 큐에 대해서 알아봅시다. jquery 효과는 먼저 실행된 순서대로 실행하게됩니다. 다음 소스를 보고 어떤 애니메이션부터 실행될지 예상해봅시다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; position: relative; } $(document).ready(function(){ //클릭시 animate 메소드를 체이닝으로 연결했습니다. //큐에 들어가서 차례로 실행이 됩니다. $('div').click(function(){ $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' },..

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드 를 사용해 동적으로 애니메이션을 적용하는 예제입니다. 간단하므로 소스코드를 바로 보시면 이해가 되실겁니다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; } $(document).ready(function (){ $('div').click(function(){ //변수를 선언합니다. var width = $(this).css('width'); var height = $(this).css('height'); //animate 메소드를 사용합니다. //즉 클릭시 다음 animate 메소드 효과가 적용됩니다. $(this).animate({ ..

hover 메소드는 다음과 같습니다. .hover( handlerIn(eventObject), handlerOut(eventObject) )Returns : jQuery 개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다. .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능 handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능 animate 메소드를 사용하려면 position 스타일 속성이 absolute이거나 relative 여야합니다. 그점에 유의하여 hover 메소드와 animate 메소드..

innerfade 플러그인은 시각효과를 위한 플러그인입니다. 다운은 http://medienfreunde.com/lab/innferfade 에서 내려 받을수 있습니다. innerfade 플러그인을 사용하려면 head 태그에 script를 추가해야합니다. innerfade 메소드를 구현하면 쉽게 플러그인을 구현할 수 있습니다. 필요한 파라미터는 소스에 주석으로 작성했습니다. 소스코드 DOCTYPE html> * {margin: 0px; padding: 0px;} ul {list-style:none;} img {width: 500px; height: 350px;} $(document).ready(function (){ //innerfade 플러그인을 적용합니다. //2초마다 그림을 변경하게 합니다. //sp..

jquery에서 지원하는 간단한 시각 효과 첫 번째는 toggle 메소드를 이용한 show 메소드와 hide 메소드의 실행입니다. show 메소드는 문서 객체를 보여주는것이고 hide 메소드는 문서 객체는 사라지게 하는 것입니다. 실행화면을 보시면 쉽게 이해가 됩니다. DOCTYPE html> $(document).ready(function (event){ //이벤트를 연결합니다. $('button').click(function (){ //간단한 효과를 적용합니다. $('.page').toggle('slow'); }); }); Toggle show lorem issumdolorsit lorem issumdlskjfalsdkjfa;lk 출력화면 클릭시 아래 화면이 다음과 같이 없어집니다.

입력 양식이 바뀔 때 이벤트를 받는 내용은 기존의 자바스크립트와 비슷합니다. 다음은 type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트입니다. 소스 DOCTYPE html> $(document).ready(function (event){ //체크박스가 변하면 이쪽으로 오게 됩니다. //이중 all-check 값이 변하게 되면 check-item아이디를 가진 것의 //모든 체크박스를 체크하게 됩니다. $('#all-check').change(function() { if(this.checked){ $('#check-item').children().prop('checked', true); }else{ $('#check-item..

스크롤 이벤트를 통한 무한 스크롤을 구현해보기 윈도우 이벤트는 window 객체에 의해서 구현이 됩니다. 이 객체의 scrollTop값과 height 값을 더한 값이 실제 문서의 높이를 의미하는 document 객체의 height 속성 값이 같으면 즉 스크롤이 Rx까지 도달했다는 의미입니다. 이를 사용하여 무한 스크롤을 구현해보았습니다. 소스 DOCTYPE html> $(document).ready(function (event){ $(window).scroll(function(){ var scrollHeight = $(window).scrollTop() + $(window).height(); var documentHeight = $(document).height(); //스크롤이 맨아래로 갔는지 아닌지 ..

keyup메소드는 키보드의 키가 눌리고 올라갈 때 불려지는 메소드입니다. 이 메소드를 이용해서 다음과 같이 간단한 글자수 세기 프로그램을 만들어봅시다. DOCTYPE html> $(document).ready(function (event){ $('textarea').keyup(function(){ //남은 글자 수를 구합니다. var inputLength = $(this).val().length; var remain = 150 - inputLength; //문서 객체에 입력합니다. $('h1').html(remain); //문서 객체의 색상을 변경하빈다. if(remain >= 0){ $('h1').css('color', 'black'); }else{ $('h1').css('color', 'red'); ..