jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します

高洛峰

Dec 28, 2016 am 10:45 AM

jquery animate

ピーシューター、芝生、弾丸はすべて既成の画像です。

1. jQuery はライブラリですか、それともフレームワークですか?

jQueryはフレームワークというより、今最も人気のあるjsライブラリと言えます。

以前、Zhihu で次のようなことを言っているのを見ました:

特定の制約の下でフレームワークを使用します。

個人的には、js ライブラリはドキュメント要素と直接対話する API を指し、ライブラリを直接参照してサービスを提供できると思います。フレームワークはアーキテクチャレベルに偏っています。フレームワークを使用する場合は、そのルールに従う必要があります。たとえば、angular.js はメソッドを提供すると同時に、DOM ドキュメント構造を制約します。

Java の 3 つの主要なフレームワークを例に挙げると、Spring を使用したい場合は、鉄筋コンクリートが完成しているので、その手順に従う必要があります。入れて飾ります。このライブラリは StringUtils に似ていますが、公開するインターフェイス以外は何も気にする必要はありません。直接呼び出すことができます。

2. jQuery のアニメーション関数

animate() 関数は、CSS 属性に基づいてカスタムアニメーションを実行するために使用されます

基本的な使用法:

$(&#39;#id&#39;).animate(css,time,callback);

ログイン後にコピー

css: 最終的に実装する必要があるスタイルのリスト

時間:遷移時間

コールバック: コールバック関数

animate 関数は、主に CSS スタイルの遷移効果を実現するために使用されます。

3. jQuery を導入します

たとえば、今私は div ボックスを持っています。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id=&#39;box&#39;></div>
 </body>
 
 <script>
 
 </script>
 
</html>

ログイン後にコピー

上記のコードでは、Baidu が提供する jQuery ファイルを導入しました。

では、導入が成功したかどうかを素早く判断するにはどうすればよいでしょうか?次のメソッドが提供されています:

1.console.log($);

効果:

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますこれは、導入が成功したことを示します。

2. ブラウザで直接確認します

ページを開いて F12 を押すと、ブラウザに付属のこのようなコンソールが表示されます (ここでは Google Chrome を使用しています)。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します $

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますを入力してください！

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますねえ、これでいいの？

4. onmouseover イベント

div ボックスにマウスオーバーイベントを追加しましょう。

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

ログイン後にコピー

クロスしてください:

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますまあ、これは少なくとも、これまでのコードが正しいことを示しています。私が初めて js を学んだとき、これはコードのすべての行がうまく書かれていると感じさせます。安心してください。

5. animate 関数を使用してボックスの幅と高さを変更します

アラートを削除し、次のコードを追加します:

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

ログイン後にコピー

これは、マウスを上に描くと幅が 600 ピクセルに変更され、遷移時間は 500 ミリ秒です。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します幅を2倍にした後、高さを2倍にしたい場合はどうすればよいですか?

ちなみに、コールバック関数を使うと、最初のアニメーションが実行されたら、次のアニメーションを継続して実行します:

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

ログイン後にコピー

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますこのようにシーケンスがあります。

この記事ではjQueryのanimate関数の使い方を簡単に紹介します。

6. 付録

最後に、animate 関数に加えて、js timer setInterval メソッドも使用します:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class=&#39;wrap&#39;>
   <ul class=&#39;plants1&#39;>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants2&#39;>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants3&#39;>
 
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  src="/static/imghw/default1.png"  data-src="img/Peashooter.gif"  class="lazy"  class=&#39;Peashooter&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  src="/static/imghw/default1.png"  data-src="img/PB00.gif"  class="lazy"  class=&#39;PB00&#39;  / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
   </ul>
  </div>
 </body>
 
 <script type="text/javascript">
 
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };
 
  setInterval(function(){
   var $this = $(&#39;.PB00&#39;).eq(randomNum(17));
   $this.animate({&#39;margin-left&#39; : 1000},2000,function(){
    $this.css({&#39;margin-left&#39; : 0});
   });
  },10);
 
 </script> 
 
</html>

ログイン後にコピー

概要

以上がこの記事の全内容です。 , みなさんの参考になれば幸いです勉強も仕事も役に立ちます。ご質問がございましたら、メッセージを残して PHP 中国語 Web サイトをご利用いただきありがとうございます。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現するその他の関連記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7677

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。