jQuery의 애니메이션 기능은 이미지와 텍스트 전환 애니메이션을 구현합니다.

일부 사진 사이트에서는 사진을 표시할 때 사진 위에 마우스를 살짝 올리면 사진의 텍스트 소개 정보를 볼 수 있는 것을 볼 수 있습니다. 실제로 이러한 애니메이션 프로세스는 jQuery의 애니메이션 기능을 사용하여 구현할 수 있습니다. .

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>强震摧毁加勒比海小国海地</h3> 
    <p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍有明亮的瞬间存在。</p> 
    <p><a href="#">查看详情</a></p> 
  </div> 
</div>

이미지를 배치하는 데는 DIV.wrap을 사용하고, 가려야 하는 div.cover는 이미지의 소개 정보를 배치하고 모든 표준 HTML 콘텐츠를 지원합니다. 그런 다음 위의 코드를 여러 번 복사하여 그림 그룹으로 배열합니다.

CSS

CSS를 사용하여 .wrap을 정렬하고 .cover 오버레이의 일부를 숨겨야 합니다. 마우스를 위로 올리면 jquery를 호출하여 표시됩니다.

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;} 
.wrap img{position:absolute; top:0; left:0} 
.wrap h3{line-height:30px; font-size:14px; color:#fff} 
.wrap p{line-height:20px} 
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; } 

숨겨진 .cover 부분은 position:absolute 절대 위치 지정을 사용한다는 점에 주목할 가치가 있습니다. 오버레이 .cover는 제목 부분만 표시합니다. 이 .wrap의 높이는 200px이므로 top:170px만 설정하면 됩니다. 제목 h3은 높이에서 30px을 뺀 값입니다.

jQuery

먼저 오버레이의 투명도를 0.8로 설정한 다음 마우스가 이미지 위로 슬라이드할 때 호버 기능을 사용하여 애니메이션 애니메이션을 호출합니다.

$(function(){ 
  $(".cover").css("opacity",.8); 
  $(".wrap").hover(function(){ 
    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160}); 
  },function(){ 
    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160}); 
  }); 
}); 

animate 함수는 jQuery가 사용자 정의 애니메이션을 만드는 데 사용하는 함수입니다. 이 기능의 핵심은 애니메이션 형식과 결과 스타일 속성 개체를 지정하는 것입니다. 이 개체의 각 속성은 변경 가능한 스타일 속성(예: "높이", "상단" 또는 "불투명도")을 나타냅니다. 각 속성의 값은 애니메이션이 종료될 때 이 스타일 속성의 값을 나타냅니다. 숫자 값인 경우 스타일 속성은 현재 값에서 지정된 값으로 그라데이션됩니다. "hide", "show" 또는 "toggle"과 같은 문자열 값이 사용되는 경우 해당 속성에 대해 기본 애니메이션 양식이 호출됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.