jQuery 플러그인 애니메이션 사용 요약 공유 예

당신이 플러그인 애니메이션에 대해 얼마나 알고 있는지 모르겠습니다. 이 기사는 예제 코드를 통해 jQuery 플러그인 애니메이션의 사용법을 공유하며, 필요한 친구들이 참고할 수 있기를 바랍니다. 모두를 도울 수 있습니다.

사용 배열

얻어진 효과는 다양한 효과를 지닌 다양한 전환 효과입니다

<p class="animsition">
  <p class="item bg-indigo">
   <h1>Animsition: Sandbox</h1>
  </p>
  <h2>Defaults</h2>
  <ol>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >Basic</a></li>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >Options</a></li>
  </ol>
 </p>

<script src="jquery-3.2.1.min.js"></script>
  <script src="js/animsition.js"></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inClass: 'flip-in-y',
  outClass: 'flip-out-y',
  inDuration: 1500,
  // outDuration: 800,
  linkElement: '.animsition-link',
  // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
  loading: false,
  loadingParentElement: 'body', //animsition wrapper element
  loadingClass: 'animsition-loading',
  loadingInner: '', // e.g '<img src="loading.svg" />'
  timeout: false,
  timeoutCountdown: 5000,
  onLoadEvent: true,
  browser: [ 'animation-duration', '-webkit-animation-duration'],
  // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
  // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
  overlay : false,
  overlayClass : 'animsition-overlay-slide',
  overlayParentElement : 'body',
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>

주의! ! ! CSS 파일에 있는 .animismion 클래스의 불투명도는 0으로 설정되어 있습니다. 그렇지 않으면 페이지 요소가 표시되지 않습니다. ! !

관련 권장 사항:

jQuery UI 날짜 선택기 Datepicker 세부 설명

jQuery 테이블 프런트 엔드 정렬 기능 구현 세부 설명

jQueryMobile 양식 긴 콘텐츠 결함 및 해결 방법에 대한 자세한 설명 예

위 내용은 jQuery 플러그인 애니메이션 사용 요약 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!