JQueryアニメーションのhide()とshow()の使い方解説1（コード例）-jsチュートリアル-php.cn

JQueryアニメーションのhide()とshow()の使い方解説1（コード例）

不言

リリース： 2019-01-18 10:45:20

転載

2371 人が閲覧しました

この記事の内容は、JQuery アニメーションでの Hide() と show() の使用に関するものです (コード例)。必要な方は参考にしていただければ幸いです。助けます。

hide() メソッドと show() メソッドでは、アニメーション効果を設定できます。この記事では、これら 2 つのメソッドの効果について説明します。

hide (パラメータ 1、パラメータ 2):

パラメータ 1: オブジェクトが非表示になるまでの時間を示す時間 (ミリ秒単位)

パラメータ 2: コールバック関数、この関数はオブジェクトが非表示になった後に起動されます。

show(パラメータ 1, パラメータ 2):

パラメータ 1: 上記と同じ

パラメータ 2: 上記と同じ

例:

要件の説明: 画像をクリックすると、画像が徐々に非表示になり、後の画像が前の画像の位置を補完します。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 100px;
            height: 80px;
        }
        
        #pics div{
            float: left;
            margin: 2px;
            width: 100px;
            height: 80px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            //获取所有的图片,并注册点击事件
            $("#pics>div").click(function(){
                $(this).hide(800,function(){
//回调函数，清除当前点击的元素
                    $(this).remove();//方法移除当前调用这个方法的元素---自杀
                });
            });
        });
    </script>
</head>
<body>
    <div id="pics">
        <div><img src="images/01.jpg" ></div>
        <div><img src="images/02.jpg" ></div>
        <div><img src="images/03.jpg" ></div>
        <div><img src="images/04.jpg" ></div>
        <div><img src="images/05.jpg" ></div>
    </div>
</body>
</html>

ログイン後にコピー

注:

 $(this).remove();//方法移除当前调用这个方法的元素---自杀

ログイン後にコピー

以上がJQueryアニメーションのhide()とshow()の使い方解説1（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JQueryアニメーションのhide()とshow()の使い方解説1（コード例）