jQuery/jQuery Effects5 jQuery stop(),Callback,Chaining 이번 장에서는 jQuery stop(), Callback,Chaining 에 대해서 알아보겠습니다. jQuery stop() stop()은 말 그대로 어떤 액센이 수행될때 멈추는 것을 말합니다. 기본 문법은 $(selector).stop(stopAll,goToEnd); 사용할 수 있습니다. 기본 예제 $("#stop").click(function(){ $("#panel").stop(); }); 관련예제 슬라이딩 멈춰라 슬라이딩 해라 Park's 블로그 // 슬라이딩을 하는 도중에 "슬라이딩 멈춰라" 버튼을 클릭하면 슬라이딩이 멈추는것을 볼 수 있습니다. jQuery Callback Functions 자바스크립트는 기본적으로 한줄씩 실행이 됩니다. 그러나 어떤 경우에는 함수가 실행이 끝나지 않았을때 실행이.. 2013. 5. 16. jQuery Effects - Animation jQuery Animation은 애니메이션 효과를 만들 수 있습니다. 기본적인 문법은 $(selector).animate({params},speed,callback); 사용합니다. animate() 간단한 속성 animate()로 CSS속성을 정의할 수 있습니다. "slow", "fast", milliseconds 로 시간을 정의할 수 있습니다. 간단한 사용 방법은 아래 구문을 확인해주세요. 의 내용을 왼쪽으로 250px 이동하는 내용입니다. $("button").click(function(){ $("div").animate({left:'250px'}); }); 관련예제 애니메이션 효과 CSS를 정의하여 좌측으로 250px 만큼 div 값을 이동합니다! // 이미지에서 확인되듯이 "애니메이션 효과" 버튼.. 2013. 5. 15. jQuery Effects - Sliding jQuery Sliding는 어떤 내용이 위, 아래로 슬라이딩하게 하는 역할을 합니다. slide 종류에는 slideDown(), slideUp(), slideToggle() 이 있습니다. slideDown() 기본 문구는 $(selector).slideDown(speed,callback); 처럼 사용합니다. 괄호() 안에 숫자를 넣어 속도를 조절할 수 있으며, "slow", "fast" 등을 사용할 수 있습니다. $("#flip").click(function(){ $("#panel").slideDown(); }); 관련예제 이곳을 클릭해보세요!! 안녕하세요 Park's의 블로그 입니다. // div 영역 "flip" 을 클릭하면 "안녕하세요 ~" 내용이 아래로 슬라이딩 됩니다. -------------.. 2013. 5. 14. jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() 이번 장에서는 jQuery 에서 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 함수에 대해서 알아보겠습니다. fade의 사전적인 의미는 "천천히 사라지다" , "점점 희미해지다" 라는 뜻입니다. 그럼 대충 어떤 현상이 일어나겠구나 하는 짐작은 할 수 있을 겁니다. jQuery fadeIn() 천천히 나타나게 하는 함수 입니다. $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); 관련예제 fadeIn 현상을 확인해보세요! fadeIn 버튼을 클릭하세요 // 우선 기본적으로 fadeIn()을 사용하며, 괄호() 안에 위처럼 옵션을 줄 수 .. 2013. 5. 13. jQuery hide(), show(), toggle() 이번 장에서는 hide(), show(), toggle()에 대한 기능을 알아보겠습니다. 이미 앞장부터 보셨다면 이미 hide() 기능을 알고 계실거라 생각됩니다. hide() 기능은 문구를 숨기는 기능을 합니다. show() 기능은 문구를 보여주는 기능을 합니다. $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 관련예제 버튼을 차례차례 클릭해보시기 바랍니다. 숨겨라 보여줘라 // 버튼의 id값 hide를 클릭하면 문구가 없어지는 현상이 나타남 // 버튼의 id값 show를 클릭하면 문구가 나타나는 현상이 나타남 // "보여줘라" 버튼을 클릭하면 글씨가 나타나며 // "숨겨라" 버튼.. 2013. 5. 13. 이전 1 다음
