jQuery を使用して animate.css コードをカプセル化する方法

今回は、jQueryを使用してanimate.cssコードをカプセル化する方法と、jQueryを使用してanimate.cssコードをカプセル化する際の注意事項を説明します。以下は実際的なケースです。 。

animate.css は、楽しいクロスブラウザーの css3 アニメーション ライブラリです。

まず、アニメーションCSSファイルを導入します

<link rel="stylesheet" href="animate.css" rel="external nofollow" >

次に、指定したアニメーションスタイル名を指定した要素に追加します

<p id="box" class="animated bounce"></p>

これには2つのクラス名が含まれており、最初のクラスは基本的なもので、スタイル名です実装する要素はこれを追加する必要があります。 2 番目は、指定されたアニメーション スタイル名です。

3. 要素にアニメーション スタイルを動的に追加したい場合は、jquery を通じて実行できます

アニメーション オブジェクト にクラスを追加し、アニメーション終了 イベント をリッスンします。アニメーションが終了したら、以前に追加したクラスをすぐに削除できます。

jQuery の公式パッケージは次のとおりです:

//扩展$对象，添加方法animateCss
 $.fn.extend({
 animateCss: function (animationName) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $(this).addClass('animated ' + animationName).one(animationEnd, function() {
  $(this).removeClass('animated ' + animationName);
  });
 }
});
//调用示例：
$('#box').animateCss('bounce');

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。

推奨読書:

jqueryフォーム検証の送信

jQueryチェックボックスの選択と値の取得

Jquery ajax非同期クロスドメインの実装方法

以上がjQuery を使用して animate.css コードをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。