jquery通过递归来实现的图片依次消失和隐藏的案例

admin web前端 暂无评论 304 浏览

javascript jquery通过递归来实现的图片依次消失和隐藏的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
        }
        img{
            width:90px ;
            height:90px;
            vertical-align: top;
        }

    </style>
   
</head>        
<body>        
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
</div>

</body>
<script src="../jquery-1.12.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btn1').click(function(){
            $('div img').last('img').hide(600,function(){
                $(this).prev().hide(600,arguments.callee)
            })
        })

        $('#btn2').click(function(){
            $('div img').first('img').show(600,function(){
                $(this).next().show(600,arguments.callee);
            })
        })
    })
    // argument为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名，多用于递归调用，防止函数执行与函数名紧紧耦合的现象，对于没有函数名的匿名函数也非常起作用。

</script>
</html>

 

相关博文

jquery通过递归来实现的图片依次消失和隐藏的案例
赏