제이쿼리 - 애니메이션 처럼 보이게 만들기

제이쿼리 - 애니메이션 처럼 보이게 만들기

Insert title here *{ padding: 0; margin: 0; } body { font-size:14px; font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:active { color: tomato; text-decoration: underline; } .btn{ color:#333; font-weight:500; border:1px solid #ccc; background-color:#fff; text-align:center; cursor:pointer; padding:3px 10px 5px; border-radius:4px; } ul { list-style: none; } li{ padding: 0; } h3{ margin: 30px; } .box{ box-sizing: border-box; width: 350px; min-height: 50px; margin: 20px auto; border: 3px dotted gray; padding: 15px; } .ps { font-size: 15px; color: #fff; background: #333; padding: 5px; margin-bottom: 5px; } $(function() { // 처음, 마지막 // $("#s1 li").first().css("background", "#eee"); // $("#s1 li").last().css("background", "#eee"); // $("#s1 li").eq(0).css("background", "#eee"); // 처음 // $("#s1 li").eq(-1).css("background", "#eee"); // 마지막 // $("#s1 li").filter(":odd").css("background", "#eee"); // 홀수번째 // $("#s1 li").not(":odd").css("background", "#eee"); // 홀수 제외 $("#s1 li").has(".item").css("border", "1px solid red"); // li 요소중 클래스 item을 하위 요소로 가진 모든 li 요소 if($("label").parents().is("p")){ // 존재하면 true $(".box1").text(" 요소의 상위 요소로 p 요소가 존재"); } // map() : 선택한 요소 집합의 각 요소마다 지정된 콜백 함수 실행 var val = $("#s1 li").map(function(){ return $(this).html(); }).get().join(","); $(".box2").html(val); // 인덱스 범위의 요소 $("#s2 li").slice(2).css("color", "tomato"); // 인덱스 2 이상 $("#s2 li").slice(1, 3).css("border", "1px solid #777"); // 인덱스 1이상, 3미만 }); $(function(){ $(".box3").css("background", "tomato"); $(".btn1").click(function(){ var isHidden = $(".box3").is(":hidden"); // var isVisible = $(".box3").is(":visible"); if(isHidden) { $(".box3").show(300); } else { $(".box3").hide(300); } }) }); /* -- 필터링 메소드 .first() : 선택한 요소 중에서 첫 번째 요소를 선택함. .last() : 선택한 요소 중에서 마지막 요소를 선택함. .eq() : 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함. .filter() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택함. .not() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함. .has() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함. .is() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환함. .map() : 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고, 그 반환값으로 구성된 jQuery 객체를 반환함. .slice() : 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택함. */ 탐색(Traversing) 프로그래밍 자바 스프링 파이썬 C C++ Unix C 웹 프로그래밍 자바스크립트 HTML CSS Node.js JSP ASP.NET PHP 확인

show 와 hide 를 이용해서 마치 애니메이션을 넣은 것 처럼 효과를 줄 수 있다.

확인 버튼을 눌렀을때 빨간 박스가 없으면 나오게 만들고 있으면 없앤다

show(움직이는 속도) 괄호안에 속도를 줘서 움직이는 속도를 조절 할 수 있다

숫자가 작을수록 빠르고 클 수록 느리게 움직인다.

전체 코드 중 애니메이션 처럼 보이게 하는 코드 부분

$(function(){ $(".box3").css("background", "tomato"); $(".btn1").click(function(){ var isHidden = $(".box3").is(":hidden"); // var isVisible = $(".box3").is(":visible"); if(isHidden) { $(".box3").show(300); } else { $(".box3").hide(300); } }) });

from http://heidong.tistory.com/134 by ccl(A) rewrite - 2021-10-29 00:26:09