同时变换
- var $div1=$('.div1');
- $('#btn1').click(function(){
- //宽和高都扩为200px
- //宽先扩为200px 然后是高扩为200px
- $div1.animate({//jquery可以不加单位 原生的必须加单位
- width:200,
- height:"200px"
- },2000)
返回的是jQuery对象
- //宽先扩为200px 然后是高扩为200px
- $div1.animate({ //jquery可以不加单位 原生的必须加单位
- width: 200
- }, 1000)
- .animate({
- height: "200px"
- }, 1000)
移动到指定位置
- $('#btn2').click(function() {
- $div1.animate({
- left:500,
- top:100
- },2000)})
- $('#btn2').click(function() {
- //移动到(500,100)处
- // $div1.animate({
- // left:500,
- // top:100
- // },2000)
-
- //移动到(20,20)处
- $div1.animate({
- left:20,
- top:20
- },2000)
-
-
- })
移动指定的距离animate
- //移动距离为(100,50) 需要用到当前位置
- $div1.animate({
- left:'+=100',
- top:'+=50'
- },2000)
- $('#btn3').click(function() {
- //移动距离为(100,50) 需要用到当前位置
- $div1.animate({
- left:'+=100',
- top:'+=50'
- },2000)
- //移动距离为(-100,-20)
- $div1.animate({
- left:'-=100',
- top:'-=20'
- },2000)
-
- })
停止动画stop
- $('#btn4').click(function(){
- $div1.stop();//只能停止一个动画
-
- })