JQ 的animate动画详解

来源：互联网发布：中国软件行业协会会费编辑：程序博客网时间：2024/06/05 06:43

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

0 0