Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiel für eine Zusammenfassung der Verwendung einer jQuery-Plugin-Animation

小云云
Freigeben: 2017-12-29 09:20:34
Original
2635 Leute haben es durchsucht

Ich weiß nicht, wie viel Sie über die Plugin-Animation wissen. Er ist sehr gut und hat Referenzwert Ich hoffe, es kann allen helfen.

Nutzungsvereinbarung

Der erzielte Effekt ist der Übergangseffekt verschiedener unterschiedlicher Effekte

<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>
Nach dem Login kopieren

Achtung! ! ! Die Deckkraft der .animition-Klasse in der CSS-Datei ist auf 0 gesetzt; sie muss geändert werden, sonst sind die Seitenelemente nicht sichtbar! ! !

Verwandte Empfehlungen:

jQuery UI-Datumsauswahl Datepicker, detaillierte Erklärung

jQuery-Implementierung der Tabellen-Front-End-Sortierfunktion im Detail Erklärung

Ein detailliertes Beispiel erklärt die Mängel und Lösungen von jQueryMobile aus langem Inhalt

Das obige ist der detaillierte Inhalt vonBeispiel für eine Zusammenfassung der Verwendung einer jQuery-Plugin-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage