> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 페이드인은 어떤 방법인가요?

jquery 페이드인은 어떤 방법인가요?

青灯夜游
풀어 주다: 2022-06-07 17:39:29
원래의
2209명이 탐색했습니다.

페이드 인하는 방법에는 3가지가 있습니다. 1. 숨겨진 요소를 페이드 인할 수 있는 fadeIn(), 구문은 "element object.fadeIn(페이드 인 지속 시간)"입니다. 2. fadeTo(), 구문은 "요소 개체"입니다. .fadeTo(기간, 1)"; 3. fadeToggle(), 구문 "object.fadeToggle(기간)".

jquery 페이드인은 어떤 방법인가요?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, Dell G3 컴퓨터. jQuery에서는 페이드 인 효과를 달성하는 세 가지 방법이 있습니다. ) 메소드

fadeIn()은 숨겨진 요소를 페이드 인하는 데 사용됩니다.
  • 구문:

    $(selector).fadeIn(speed,callback);
    로그인 후 복사

  • 선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다. .

  • 선택적인 콜백 매개변수는 페이딩이 완료된 후 실행될 함수의 이름입니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
	</head>

	<body>
		<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
		<button>点击淡入 div 元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

	</body>
</html>
로그인 후 복사

2, fadeTo() 메서드

    fadeTo() 메서드를 사용하면 지정된 불투명도(0에서 1 사이의 값)로 페이드할 수 있습니다.
  • 구문:

    $(selector).fadeTo(speed,opacity,callback);
    로그인 후 복사
  • 필수 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

fadeTo() 메서드의 필수 불투명도 매개변수는 페이드 효과를 지정된 불투명도(0에서 1 사이의 값)로 설정합니다.

jquery 페이드인은 어떤 방법인가요?

선택적인 콜백 매개변수는 함수가 완료된 후 실행될 함수의 이름입니다.

페이드인 효과를 얻으려면 opacityc 매개변수의 값을 1로 설정하기만 하면 됩니다.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",1);
		$("#div2").fadeTo("slow",1);
		$("#div3").fadeTo(5000,1);
	});
});
로그인 후 복사

  • 3. fadeToggle() 메소드

  • fadeToggle() 메소드는 fadeIn()과 fadeOut() 메소드 사이를 전환할 수 있습니다.

  • fadeToggle()은 요소가 숨겨진 경우 페이드인 효과를 추가합니다.

fadeToggle()은 이미 표시된 요소에 페이드 효과를 추가합니다.


$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(5000);
	});
});
로그인 후 복사

jquery 페이드인은 어떤 방법인가요?

【추천 학습: jQuery 동영상 튜토리얼,

웹 프론트엔드 동영상

위 내용은 jquery 페이드인은 어떤 방법인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿