Fadein 및 Fadeout으로 jQuery 사진 슬라이드 쇼 생성

이 스크린 캐스트는 jQuery의 및 fadeIn 메소드를 사용하여 간단한 슬라이드 쇼를 생성하는 것을 보여줍니다. 이 방법은 요소 가시성에 대한 편리한 애니메이션 제어를 제공하여 CSS3만으로보다 세분화 된 제어를 제공합니다. 이 비디오는이 기술을 보여주고 다른 방법과 비교할 수 있습니다. [YouTube pxyflux7ibk] 이것은 "jQuery : Beyond the Basics"에서 배경으로 학습 가능합니다. fadeOut 자주 묻는 질문 (faqs)

슬라이드 쇼를 중지 : 슬라이드 쇼를 중단하려면 jquery의 메소드를 사용하십시오. 이것은 즉시 타겟팅 된 요소의 활성 애니메이션을 끝납니다. 예를 들어 :

애니메이션 속도 제어 :

시간 (밀리 초)을 매개 변수로 지정하여 및 의 속도를 조정하십시오. 예 : (2 초 페이드 인). 지연 추가 : 애니메이션간에 일시 정지를 소개하기 위해 jQuery의 메소드를 사용하십시오. 예를 들어 :

(페이드-인과 페이드 아웃 사이의 2 초 지연) stop() 다양한 요소와 함께 사용 : $("#slideshow").stop();

및

메소드는 이미지에만 국한되지 않습니다. 요소가 처음에 숨겨져있는 경우 (CSS 또는 jQuery의 메소드를 통해) HTML 요소 (divs, 단락 등)에서 작동합니다. 연속 루프 생성 : 연속 루핑을 달성하려면 , 및 fadeIn 메소드를 결합하십시오. 이 예제는 페이딩 된 후 첫 번째 이미지를 끝으로 이동합니다. fadeOut $("#element").fadeIn(2000); 이미지 캡션 추가 :

내에서 데이터 속성을 사용하여 캡션을 포함시킵니다 탐색 버튼 구현 : 버튼을 만들고 jQuery를 사용하여 클릭 핸들러를 첨부하십시오. 이 핸들러는

및 를 사용하여 다음 또는 이전 이미지를 표시 할 수 있습니다. 예제 (단순화) :

배경 이미지 : delay() 는 불투명도가 전체 요소에 영향을 미치기 때문에 배경 이미지에 직접 적용하는 것은 불가능합니다. 그러나 배경 이미지를 div로 감싸고 div. 를 페이딩하여 비슷한 효과를 얻을 수 있습니다. $("#element").fadeIn().delay(2000).fadeOut(); 크로스 페이딩 : 크로스 페이드 효과를 위해 다음에 페이딩하는 동안 동시에 하나의 이미지를 퇴색시킵니다. 이것은 종종 이미지의 절대적인 포지셔닝이 필요합니다.

jQuery에 대한 대안 : CSS 전환은 더 많은 수동 코딩이 필요하지만 jQuery-free 대안을 제공합니다. 예제 (단순화) :

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

이 확장 된 응답은 각 FAQ에 대한 자세한 설명 및 코드 예제를 제공합니다.

위 내용은 Fadein 및 Fadeout으로 jQuery 사진 슬라이드 쇼 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!