잡스러운 것의 집합

자바스크립트는 줄 단위로 실행합니다. 하지만 여러가지 효과들은 효과가 끝나기 전에 다음라인을 수행합니다. 이러한 것으로 인해서 오류가 일어날 수 있습니다. 콜백은 효과가 모두 종료되어야 실행됩니다. 지금까지 보았던 이펙트 관련된 것들을 보면 callback 이라는 부분이 있습니다. 이곳에 필요한 것들을 넣어주게 됩니다. $(selector).hide(speed, callback); 직접 동작을 보는게 좋겠죠. 대가리(head)를 만듭니다. $(document).ready(function(){ $("button").click(function(){ $("p").hide("5000",function(){ alert("The paragraph is now hidden"); }); }); }); 본문(body)는..

여러가지 효과를 주다 보면 중단을 시켜야할 때도 있다. 그럴때 사용하는 것이 stop 이다. 구문은 다음과 같다. $(selector).stop(stopAll, gotToEnd); 일단 두상(head)과 몸뚱아리를 만들어 어떻게 동작을 하는지 보도록 하자. $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle(10000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); 몸통은 다음과 같이 작성한다. 이놈 꼼짝마 클릭하시면 쑥쑥 자라나요. 은행 이자가 이렇게 늘어나면 좋겠는데 상단부를 누르면 자라목과 같이 슉하고 나오는데 그 동안에 상단의 버튼을 누르..

다른 이펙트보다 더 동적인 움직임을 표현할 수 있습니다. animate의 구문은 다음과 같습니다. $(selector).animate({params},speed,callback); // {params} 에 들어가는 것은 해당 요소를 꾸미는 것입니다. CSS 일단 어떤 동작을 하는지 보기 위해서 머리(head) 부분에 다음과 같이 입력합니다. 몸뚱아리(body)를 꾸며야 동작을 하는걸 볼수 있겠죠? 투포환 선수 폭탄 입니다. 버튼을 누르게 되면 처음에 있던 자리에서 왼쪽으로 350픽셀만큼 이동합니다. 그럼 조금 더 다른 것을 해보겠습니다. head에서 조금만 변경합니다. $("div").animate({left:'350px'}); // 위처럼 되어 있는 곳을 아래와 같이 바꿉니다. $("div").anim..

축구에 보면 슬라이딩이라는 말이 있다. 미끄러지면서 상대방의 공을 뺏는 것을 말한다. 물론 여러곳에서 쓰이지만 jQuery 이펙트에도 이런 형태의 효과가 있다. sliding 은 다음과 같은 것이 있다. $().slideDown();// 아래쪽으로 미끄러지는 효과 $().slideUp();// 위쪽으로 미끄러지는 효과 $().slideToggle();// 오르락 내리락 반복하는 효과 Down + UP 그럼 일단 대가리 아니 head에 들어가는 부분을 다음과 같이 작성한다. jQuery를 포함하는 구문은 생략한다. 몸뚱아리(body) 부분에는 다음과 같이 작성을 한다. 19금 아니여도 클릭해주세요. 이렇게 슝하고 나오는 겁니다. 아래로 툭 하고 튀어나오는 것을 볼수 있을 겁니다. 이제 슉 들어가는 slid..

fade 효과를 적용하기 위해서는 다음과 같은 함수들을 사용합니다. $().fadeIn();// 지정한 요소를 나타나게 합니다. $().fadeOut();// 지정한 요소를 사라지게 합니다. $().fadeToggle();// in + out 효과를 반복합니다. $().fadeTo();// 불투명하게 사라집니다. 어떤 동작을 하는지 알아보기 위해서 일단 head에 다음과 같이 작성합니다. html의 body에 다음과 같이 입력합니다. 눌러보세요. 시골 부동산 가격 비싸다 fadeout을 알아보기 위해서 head에는 다음을 입력합니다. 내용이 보여야 되는 body 부분에는 눌러보세요. 보험료도 대박 페이지를 확인하면 처음에 보이던 것이 버튼을 누르면 사라집니다. fadeToggle는 fadeIn과 Out을..

jQuery 는 HTML 요소를 선택하고 그것에 여러가지 작업을 할 수 있습니다. 기본 형태는 다음과 같습니다. $(selector).action() $ 는 jQuery를 사용한다는 것을 명시하기 위해서 기본적으로 필요한 것입니다. (selector) 작업을 하기 위해서 선택하는 html 구성요소를 말합니다. action() 선택한 요소에 어떤 것을 수행할지 그 작업에 대한 것을 말합니다. 예를 들면 다음과 같은 형태로 사용됩니다. $("p").hide()// html 코드중 요소를 모두 숨깁니다. $(".test").hide()// html 코드중 class="test"로 지정된 것을 숨깁니다. $("#test").hide()// html 코드중 id="test" 로 지정된 것을 숨깁니다. jQuery..