首页 › 教程频道› js教程 › 查看内容

JQuery动画之hide()和show()的使用讲解二（代码示例）

作者：模板之家 2019-1-18 10:48 305人关注

本篇文章给大家带来的内容是关于JQuery动画之hide()和show()的使用讲解二（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。?

本篇文章给大家带来的内容是关于JQuery动画之hide()和show()的使用讲解二（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

本文是对hide()和show()的进一步补充，其中不仅介绍回调函数，还有递归的相关知识点。

案例要求：

点击”隐藏动画“按钮，四个头像从后向前，每个以0.8秒的速度消失

点击”显示动画“按钮，四个头像从前向后，每个以0.8秒的速度出现

知识点：

递归思想：arguments.callee

回调函数：上节有叙述

实现思路（以点击”隐藏动画“为例）：

①获取所有的img，选中最后一个img

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

②让最后一个img隐藏，并设置回调函数

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

③回调函数中，让当前函数的上一个img隐藏，并设置递归参数

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

代码如下：

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

以上就是JQuery动画之hide()和show()的使用讲解二（代码示例）的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！