Maison > interface Web > js tutoriel > le corps du texte

Exemple de résumé d'utilisation de l'animation du plugin jQuery de partage

小云云
Libérer: 2017-12-29 09:20:34
original
2637 Les gens l'ont consulté

Je ne sais pas ce que vous savez sur l'animation du plugin. Cet article partage avec vous l'utilisation de l'animation du plugin jQuery à travers un exemple de code. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela pourra aider tout le monde.

Disposition d'utilisation

L'effet obtenu est l'effet de transition de divers effets différents

<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>
Copier après la connexion

Attention ! ! ! L'opacité de la classe .animistion dans le fichier css est définie sur 0 ; elle doit être modifiée, sinon les éléments de la page ne seront pas visibles ! ! !

Recommandations associées :

Sélecteur de date de l'interface utilisateur jQuery Explication détaillée du sélecteur de date

Implémentation jQuery de la fonction de tri frontal des tables détaillée explication

Un exemple détaillé explique les défauts et les solutions de jQueryMobile à partir d'un contenu long

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal