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

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

不言forward: 2019-01-18 10:48:462503browse

The content of this article is about the second explanation of 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.

This article is a further supplement to hide() and show(), which not only introduces callback functions, but also recursion-related knowledge points.

Case requirements:

Click the "Hide Animation" button, the four avatars will disappear from back to front, each disappearing at a speed of 0.8 seconds

Click the "Show Animation" button, four avatars appear from front to back, each appearing at a speed of 0.8 seconds

Knowledge points:

Recursive thinking: arguments.callee

Callback function: described in the previous section

Implementation ideas (take clicking "Hide Animation" as an example):

①Get all img, select the last img

$("p>img").last("img")

②Hide the last img and set the callback function

$("p>img").last(" img").hide(800,function(){ }

③In the callback function, hide the previous img of the current function and set the recursive parameter

$(this).prev( ).hide(800,arguments.callee);

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 90px;
            height: 90px;
            float: left;
            /* vertical-align: top; */
        }
        div{
            width: 400px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            $("#hide").click(function(){
                $("div>img").last("img").hide(800,function(){
                    //回调函数,  arguments.callee相当于递归
                    $(this).prev().hide(800,arguments.callee);
                })
            });
            
            $("#show").click(function(){
                $("div>img").first("img").show(800,function(){
                    //回调函数
                    $(this).next().show(800,arguments.callee);
                })
            });
        });
    </script>
</head>
<body>
    <input type="button" id="hide" value="隐藏动画" />
    <input type="button" id="show" value="显示动画" />
    <div >
        <img src="images/1.jpg" >
        <img src="images/2.jpg" >
        <img src="images/3.jpg" >
        <img src="images/4.jpg" >
    </div>
</body>
</html>

The above is the detailed content of JQuery animation hide() and show() usage explanation 2 (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：JQuery animation hide() and show() usage explanation 1 (code example)Next article：JQuery animation hide() and show() usage explanation 1 (code example)

See more

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

Related articles