jQuery에서 페이드 인 및 페이드 아웃 효과를 얻는 방법-JS 튜토리얼-php.cn

jQuery에서 페이드 인 및 페이드 아웃 효과를 얻는 방법

清浅

풀어 주다： 2019-02-12 14:26:01

원래의

3531명이 탐색했습니다.

jQuery에는 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 네 가지 메소드가 있습니다. 이 네 가지 메소드를 통해 페이드인 및 페이드아웃 효과를 얻을 수 있습니다.

제가 공유하고 싶은 내용은 다음과 같습니다. 오늘은 jQuery를 통해 페이드 인 및 페이드 아웃을 구현하는 방법입니다. 효과에는 특정 참조 효과가 있으므로 모든 사람에게 도움이 되기를 바랍니다

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에서 페이드 인 및 페이드 아웃 효과를 얻는 방법