ABOUT ME

    -
    • 제이쿼리 - 여러 애니메이션 효과들
      프로그래밍/jQuery 제이쿼리 2021. 11. 1.
      반응형

      -- 페이드(fade) 효과
      .fadeIn() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함.
      .fadeOut() : 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
      .fadeToggle() : 선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함.
      .fadeTo() : 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.

      -- 효과 속도 설정
        인수로 밀리초(ms)로 설정하거나 "slow", "fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다.

       

      $(function() {
	$(".faq-body h3.question").click(function() {
		var $answer = $(this).next(".faq-body div.answer");
		if($answer.is(":visible")){
			$(this).next(".faq-body div.answer").fadeOut(100);
		} else {
			$(this).next(".faq-body div.answer").fadeIn(100);
		}
	});
});

      페이드 효과는 어떤 동작에 딜레이를 줄 수 있다.

      천천히 나타나게 하든지 빠르게 나타나게 하던지 속도를 조절 가능하다.

      인자에는 slow, fast라고 직접적으로 단어를 입력 해도 된다.

       

      $(function() {
	$(".faq-body h3.question").click(function() {
		var $answer = $(this).next(".faq-body div.answer");
		if($answer.is(":visible")){
			$(this).next(".faq-body div.answer").slideUp(100);
		} else {
			$(this).next(".faq-body div.answer").slideDown(100);
		}
	});
});


/*
-- 슬라이드(slide) 효과
.slideUp() : 선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다.
.slideDown() : 선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다.
.slideToggle() : 선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용한다.

-- 효과 속도 설정
  인수로 밀리초(ms)로 설정하거나 "slow", "fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다.
 */

      슬라이드 효과는 세로 길이로 슬라이드 되듯이 짧아지거나 길어지거나 하는 효과를 줄 수 있다.

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	margin: 0; padding: 0; box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.btn[disabled], fieldset[disabled] .btn {
	pointer-events: none;
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: .65;
}

.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

textarea:focus, input:focus {
	outline: none;
}

.box1{
	width: 10px;
	height: 10px;
	margin: 30px;
	padding: 15px; 
	background: green;
}

.box2{
	width: 150px;
	height: 150px;
	margin: 30px;
	padding: 15px; 
	background: tomato;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".btn1").click(function() {
		$(".box1").animate({
			width:"250px",
			height:"250px",
			opacity:0.5
		},1000,
		function() {
			console.log("애니메이션 효과 실행이 완료");
		});
	});
	
	$(".btn2").click(function() {
		$(".box2").animate({
			width:"toggle",
			height:"toggle",
			opacity:0.5
		},1000);
	});
});


/*
-- 애니메이션 효과
  .animate() : 메소드를 이용하여 사용자 정의한 이펙트 효과를 정의할 수 있다.
      여러 CSS 스타일 속성을 이용하여 새로운 이펙트 효과를 만들어 준다.

-- 형식
  $(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]);
  
    스타일 : 필수이며, 이펙트 효과를 구성할 CSS 스타일 속성을 정의한다.
    지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.
    시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.
    콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.
 */
</script>
</head>
<body>

<h3 style="margin: 10px;">애니메이션 효과</h3>

<div style="margin: 20px;">
	<button type="button" class="btn btn1"> 확인 </button>
	<button type="button" class="btn btn2"> 시작 </button>
</div>
<hr>

<div class="box1"></div>

<div class="box2"></div>

</html>

      animate() 메소드를 이용해서 내가 원하는 효과를 적용할 수 있도록 정의가 가능함.

       

      $(".btn1").click(function() {
		$(".box1").animate({
			width:"250px",
			height:"250px",
			opacity:0.5
		},1000,
		function() {
			console.log("애니메이션 효과 실행이 완료");
		});
	});

      opacity 는 투명하게 만드는 기능이다.

      0~1사이로 지정이 가능함

      0 = 투명

      1 = 다 보임

      반응형
      저작자표시

      '프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글

      ajax - 간단하게 파일 업로드 with 제이쿼리  (0) 2022.06.23
      제이쿼리 - 모달 다이아로그 및 여러 알림창들  (0) 2021.11.04
      제이쿼리 - 토글 toggle  (0) 2021.11.01
      제이쿼리 - 스크롤 바 다루기  (0) 2021.11.01
      제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)  (2) 2021.11.01

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바