잡스러운 것의 집합

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

다른 이펙트보다 더 동적인 움직임을 표현할 수 있습니다. 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을..