JQuery animation hide() and show() usage explanation 1 (code example)-JS Tutorial-php.cn

JQuery animation hide() and show() usage explanation 1 (code example)

不言

Release： 2019-01-18 10:45:20

forward

2412 people have browsed it

The content of this article is about the use of hide() and show() in JQuery animation (code example). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

hide() and show() methods can set animation effects. This article explains the effects of these two methods.

hide (parameter 1, parameter 2):

Parameter 1: time, in milliseconds, indicating the time it takes for the object to be hidden

Parameter 2: callback function, this function Fires after the object is hidden.

show(parameter 1, parameter 2):

Parameter 1: Same as above

Parameter 2: Same as above

Example:

Description of requirements: Click on a picture, the picture will be slowly hidden, and then deleted from the page. The latter picture will supplement the position of the previous picture.

The code is as follows:

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

Copy after login

Note:

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

Copy after login

The above is the detailed content of JQuery animation hide() and show() usage explanation 1 (code example). For more information, please follow other related articles on the PHP Chinese website!