jQuery에서 페이드 인 및 페이드 아웃 효과를 얻는 방법
- 清浅원래의
- 2019-02-12 14:26:013522검색
jQuery에는 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 네 가지 메소드가 있습니다. 이 네 가지 메소드를 통해 페이드인 및 페이드아웃 효과를 얻을 수 있습니다.
제가 공유하고 싶은 내용은 다음과 같습니다. 오늘은 jQuery를 통해 페이드 인 및 페이드 아웃을 구현하는 방법입니다. 효과에는 특정 참조 효과가 있으므로 모든 사람에게 도움이 되기를 바랍니다
[튜토리얼 추천: jQuery tutorial]
jQuery에는 fadeIn(), fadeOut(), fadeToggle(), fadeTo()라는 네 가지 페이드 메서드가 있습니다. 다음으로 기사에서는 이러한 메서드를 사용하여 페이드인 및 페이드아웃 효과를 얻는 방법을 소개합니다
fadeIn () 방법
은 주로 숨겨진 요소를 페이드 인하는 데 사용됩니다. 매개변수는 다음과 같습니다.
speed: 효과 지속 시간을 나타내며 "느리게", "빠르게" 또는 사용자 정의된 시간 값일 수 있습니다. 선택적 매개변수입니다
콜백: 페이드인 효과가 완료된 후 실행되는 함수 이름을 나타냅니다.
fadeOut() 메서드
는 주로 보이는 요소를 페이드 아웃하는 데 사용됩니다. fadeIn의 값
fadeToggle() 메소드
이 메소드는 fadeIn()과 fadeOut() 메소드 사이를 전환할 수 있습니다
요소가 페이드 아웃되면 fadeToggle()은 요소에 페이드 인 효과를 추가합니다
요소가 페이드 인된 경우 fadeToggle()은 요소에 페이드 아웃 효과를 추가합니다.
fadeTo() 메서드
fadeTo() 메서드는 지정된 불투명도(0에서 1 사이의 값)로 그라데이션을 허용합니다.
속도 및 콜백 기능 외에도 fadeTo 메소드에는 필수 불투명도 매개변수도 포함되어 있으며 목적은 페이드 효과의 불투명도를 설정하는 것입니다
예제 공유:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{
width:300px;
height:200px;
position: absolute;
top:40px;
}
button{
position: absolute;
top:10px;
}
</style>
</head>
<body>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#img").fadeToggle(3000).fadeTo(0.5);
});
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img" alt="jQuery에서 페이드 인 및 페이드 아웃 효과를 얻는 방법" >
</body>
</html>렌더링:
요약: 위 내용은 이 기사의 전체 내용입니다. 이 기사가 jQuery를 통해 페이드인 및 페이드아웃 효과를 얻는 방법을 배우는 데 도움이 되기를 바랍니다
참고: 이 기사는 jQuery를 참조합니다. jQuery 튜토리얼 매뉴얼의 페이드인 및 페이드아웃섹션
위 내용은 jQuery에서 페이드 인 및 페이드 아웃 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!