목록전체 글 (50)
공부하자
제이쿼리 animate() 메소드 : 선택한 요소를 설정한 시간동안 애니메이션 처리 문법 $("selector").animate({ // code }, time, 속도); * 속도 : 애니메이션 속도가 빨랐다 느려지거나 느렸다 빨라지는 등 변화를 주고자 할 때 사용, easing 플러그인 연결 시 설정 가능 - linear : 일정 속도 - swing : 속도가 점점 느려진다 cdnjs.com/libraries/jquery-easing jquery-easing - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A jQuery plugin from GSGD to give advanced ..
제이쿼리 setInterval 메소드 : 원하는 시간을 설정하면 해당 시간을 간격으로 설정한 코드가 자동으로 반복 실행 문법 setInterval(function(){ // 반복 실행할 코드 }, time) // 설정 시간 ex. $(function(){ //제이쿼리 실행 호출 var index = 0; setInterval(function(){ $(".section .box").removeClass("on"); //클래스 초기화 $(".section .box").eq(index).addClass("on"); //선택한 태그에 클래스 추가 index++; // 증가 연산자를 이용하여 설정한 time 마다 반응하게끔 작업 if(index == 3){ // 변수가 3이 되었을때(조건문) index = 0; ..
제이쿼리 slideUp, slideDown, slideToggle 메소드 : 슬라이드 애니메이션 효과를 구현해주는 메소드 문법 $("element").slideUp(time); $("element").slideDown(time); $("element").slideToggle(time); 1. $("element").slideUp(time); : 선택한 요소가 서서히 올라가면서 사라지는 효과 ex. $(".wrap .box").slideUp(2000); // 1000 = 1초 2. $("element").slideDown(time); : 선택한 요소가 서서히 내려가면써 나타나는 효과 ex. $(".wrap .box").slideDown(5000); 3. $("element").slideToggle(time..
제이쿼리 class() 메소드 : class 를 동적으로 추가하거나 삭제하는 메소드 .addClass(), .removeClass(), toggleClass() 문법 $("element").addClass(); $("element").removeClass(); $("element").toggleClass(); 1.$("element").addClass(); : 특정 요소에 새로운 class를 추가 ex. $(".btn").click(function(){ $(".btn").eq(0).addClass("on"); }); 2.$("element").removeClass(); : 특정 요소가 가진 class를 제거 ex. $(".btn").eq(3).removeClass("on"); 3.$("element")...
제이쿼리 CSS() 메소드 : CSS() 메소드를 이용하여 엘리먼트에 인라인 스타일로 스타일을 추가할 수 있다. 제이쿼리에만 있는 기능으로 자바스크립트에는 존재하지 않는다. 여러 스타일을 추가하고자 할때는 세미콜론으로 추가하면 된다. 문법 : $('element').css(); ex. $('.box').css('color','#f00'); $('.box').css({ 'background':'#eee','font-size':'15px' }); $(".btn").parent().css({ "color":"#f69834" }); * attr() 메소드와 css() 메소드의 차이점 : attr() 의 경우 기존의 값을 변경, css() 의 경우 기존의 값에 추가하는 개념 $('element').attr('na..