JQ 的animate动画详解

最新推荐文章于 2022-07-07 14:59:11 发布

xyphf_和派孔明

最新推荐文章于 2022-07-07 14:59:11 发布

阅读量1.6k

点赞数 1

分类专栏： DOM&BOM操作

本文链接：https://blog.csdn.net/xyphf/article/details/52732496

版权

DOM&BOM操作专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<style>
#div1{ width:200px; height:200px; background:red;}
#div2{ width:200px; height:200px; background:red; margin-top:10px;}
</style>
<body>
<input type="button" value="点击" id="input1">
<div id="div1"></div>
<div id="div2"></div>
</body>

<script>

//animate() : 
//第一个参数 : 对象 {} 去设置样式属性和值(目标点)
//第二个参数 : 时间 默认是400
//第三个参数 : 运动形式 只有两种 swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
//第四个参数 : 运行结束的回调

$(function(){  
    $('#input1').click(function(){     
        $('#div1').animate({
            width : 400
        },2000,'swing',function(){
            alert(123);
        });
    }); 
});
</script>

每点击一次，移动固定的值（累加）

<script>
$(function(){  
    $('#input1').click(function(){
        $('#div1').animate({
            width : '+=100'
        },1000,'linear');       
    });
});
</script>

<script>
$(function(){  
    $('#input1').click(function(){     
        $('#div1').animate({
            width : 300
        },{
            duration : 1000,
            easing : 'linear',
            complete : function(){
                //alert(123);
            },
            step : function(a,b){  
                //console.log(a);//可以检测我们定时器的每一次变化
                console.log(b.pos);   //运动过程中的比例值(0~1)
            }
        });     
    }); 
});
</script>

step应用，使某个值在两秒钟到达终点

<script>
$(function(){  
    $('#input1').click(function(){     
        $('#div1').animate({
            num : "move"//任意设置，不可不写
        },{
            duration : 2000,
            easing : 'linear',
            complete : function(){
                //alert(123);
            },
            step : function(a,b){  //可以检测我们定时器的每一次变化
                //console.log(a);
                //console.log(b.pos);   //运动过程中的比例值(0~1)
                $('#div1').html(parseInt(b.pos * 273826678));//两秒钟使div1中数字变化到273826678
            }
        });     
    }); 
});
</script>

等待时间delay（）

<script>
$(function(){  
    $('#input1').click(function(){     
        $('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000);   //当宽变为300后，等待1000毫秒，再运动高    
    }); 
});
</script>

stop()停止运动，清除队列

<script>
$(function(){  
    $('#input1').click(function(){     
        $('#div1').animate({width : 300},1000).animate({height : 300},1000);       
    });

    $('#input2').click(function(){     
        //$('#div1').stop();    //默认情况下 : 只会停止当前运动     
        //$('#div1').stop(true);  //第一个参数 : 可以停止所有的运动      
        //$('#div1').stop(true,true); //第二个参数 : 可以停止到指定的目标点(当前的)       
        $('#div1').finish();//所以运动立即到达终点       
    });

});
</script>

xyphf_和派孔明

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ 的animate动画详解

<style>#div1{ width:200px; height:200px; background:red;}#div2{ width:200px; height:200px; background:red; margin-top:10px;}</style><body><input type="button" value="点击" id="input1"><div id="div1
复制链接

扫一扫