4

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

 1 year ago
source link: https://blog.p2hp.com/archives/9134
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
width: 400px;
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>
<!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>




report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK