Home >Web Front-end >JS Tutorial >JQuery animation hide() and show() usage explanation 1 (code example)

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

不言forward: 2019-01-18 10:45:202409browse

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>

Note:

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

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!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript implements the effect of a magnifying glass (code example)Next article：JavaScript implements the effect of a magnifying glass (code example)

See more

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

Related articles