Animation JQuery hide() et show() explication de l'utilisation 1 (exemple de code)-js tutoriel-php.cn

Animation JQuery hide() et show() explication de l'utilisation 1 (exemple de code)

不言

Libérer： 2019-01-18 10:45:20

avant

2384 Les gens l'ont consulté

Le contenu de cet article concerne l'utilisation de hide() et show() dans l'animation JQuery (exemple de code). Les amis dans le besoin peuvent s'y référer. . Aide.

Les méthodes hide() et show() peuvent définir des effets d'animation. Cet article explique les effets de ces deux méthodes.

cacher (paramètre 1, paramètre 2) :

Paramètre 1 : temps, en millisecondes, indiquant le temps nécessaire pour que l'objet soit masqué

Paramètre 2 : rappel fonction, cette fonction se déclenche une fois l'objet masqué.

show(paramètre 1, paramètre 2) :

Paramètre 1 : Idem que ci-dessus

Paramètre 2 : Idem que ci-dessus

Exemple :

Description de l'exigence : Cliquez sur une image, l'image sera lentement masquée, puis supprimée de la page. Cette dernière image complétera la position de l'image précédente

Le code est le suivant :

<!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>

Copier après la connexion

Remarque :

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!