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ツール

ホットツール

ホットトピック

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

7328

Java チュートリアル

1626

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例 Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

10 JavaScript＆JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック