fade (페이드) ▏fade in / fade out $(function () { let slides = $('.slideshow img'), slideCount = slides.length, currentIdx = 0; slides.eq(currentIdx).fadeIn(); setInterval(()=>{ let nextIdx = (currentIdx + 1)%slideCount; slides.eq(currentIdx).fadeOut(); slides.eq(nextIdx).fadeIn(); currentIdx = nextIdx }, 4000); }); sticky 대상.offset().top; $(window).scrollTop(); < A요소 안..
jQuery? - 크로스브라우징 - 문법간결 - 요소를 선택하는 방법: $(css 선택자) 🙾 라이브러리 로드하기 - 반드시 라이브러리를 로드해야 실행됨 : - 는 반드시 로드한 라이브러리 밑에 작성해야 실행됨 // $(document).ready(function(){ : jQuery 제일 첫 문장 // 더 간결하게 줄여쓰는 문법 $(function(){ // css 속성을 한 번만 변경 가능 $('h1').css('color','red'); $('.list li').css('color','blue'); // 한 번에 여러 스타일 변경 // $(선택자).css({"속성명":"값", "속성명":"값", 등등}) // 값이 문자면 ''에 입력, 숫자면 따옴표 필요없어도 됨 $('h2').css({color:..
Tab / light box / back to top
Tab (탭) - 클래스 추가: 대상.addClass('클래스명'); - 클래스 제거: 대상.removeClass('클래스명'); - 클래스 추가 및 제거: 대상.toggleClass('클래스명'); - 클래스 찾기: 대상.hasClass('클래스명'); - attribute(요소)를 확인하는 방법: 대상.attr('속성명'); - attribute(요소)를 새값으로 바꾸는 방법: 대상.attr('속성명','새값'); ▏jQuery 속성 활용 /* tabMenu를 클릭하면 할 일 클릭된 그 요소의 속성명 href의 값을 변수 targetId에 저장 모든 링크에서 active를 제거하고, 클릭한 그 요소에 acitve 추가 모든 tabContent 보이지 않도록 한다 targetId값의 요소를 선택해서 보..
▏함수를 이용하여 작동 /* progress마다 각각 할일 변수명 bar에 각요소의 .bar, 변수명 rate에 각요소의 .rate, 변수명 rateNum 각 요소의 data-rate의 값을 할당 변수명 progressOST에는 클래스명 progress가 상단에서 떨어진 거리 - 500 윈도우 스크롤이 생기면 할 일 스크롤양이 progressOST보다 많다면 애니메이션 시작 */ let progressBar = $('.progress-bar'); let progressOST = $('.progress').offset().top - 500; function startAnimation(){ progressBar.each(function(){ let bar = $(this).find('.bar'), rate ..