jQuery プラグイン animsition の使用法を共有する例の概要

プラグインアニメーションについてどれだけ知っているかはわかりませんが、この記事はサンプルコードを通してjQueryプラグインアニメーションの使用法を紹介していますので、必要な方は参考にしていただければ幸いです。みんなを助けることができる。

使用方法

達成される効果は、さまざまな効果を持つさまざまなトランジションエフェクトです

<p>
  </p><p>
   </p><h1 id="Animsition-Sandbox">Animsition: Sandbox</h1>
  
  <h2 id="Defaults">Defaults</h2>
  <ol>
   <li><a>Basic</a></li>
   <li><a>Options</a></li>
  </ol>
 

<script></script>
  <script></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inClass: &#39;flip-in-y&#39;,
  outClass: &#39;flip-out-y&#39;,
  inDuration: 1500,
  // outDuration: 800,
  linkElement: &#39;.animsition-link&#39;,
  // e.g. linkElement: &#39;a:not([target="_blank"]):not([href^="#"])&#39;
  loading: false,
  loadingParentElement: &#39;body&#39;, //animsition wrapper element
  loadingClass: &#39;animsition-loading&#39;,
  loadingInner: &#39;&#39;, // e.g &#39;<img  src="/static/imghwm/default1.png"  data-src="loading.svg"  class="lazy"   / alt="jQuery プラグイン animsition の使用法を共有する例の概要" >&#39;
  timeout: false,
  timeoutCountdown: 5000,
  onLoadEvent: true,
  browser: [ &#39;animation-duration&#39;, &#39;-webkit-animation-duration&#39;],
  // "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 : &#39;animsition-overlay-slide&#39;,
  overlayParentElement : &#39;body&#39;,
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>

注意してください! ！ ！ CSS ファイルの .animistion クラスの不透明度は 0 に設定されています。変更しないとページ要素が表示されません。 ！ ！

関連する推奨事項:

jQuery UI 日付ピッカー Datepicker の詳細な説明

jQuery のテーブル フロントエンド ソート機能の実装の詳細な説明

jQueryMobile フォームの長いコンテンツの欠陥と解決策の例の詳細な説明

以上がjQuery プラグイン animsition の使用法を共有する例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。