jQuery中的运动

1.显示隐藏

show() hide() toggle()
默认0秒完成动画 默认0秒完成动画 默认0秒完成动画

2.淡入淡出

fadeIn() fadeOut() fadeToggle()
淡出 淡入
默认400秒完成动画 默认400秒完成动画 默认0秒完成动画

3.向上展开,向下收缩

slideUp() slideDown() slideToggle()
向上展开 向下收缩
默认400秒完成动画 默认400秒完成动画 默认0秒完成动画

4.自定义动画animate();

1)参数的运作

第一个参数:对象{} 去设置样式属性和值(目标点)
$('.div').animate({ width:100,height:100 });//加不加px都无所谓,jQ已做处理 
第二个参数:时间,默认是400
$('.div').animate({ width:100,height:100 },300);
第三个参数:运动形式,只有两种,swing(默认,缓冲:慢快慢),linear(匀速)
$('.div').animate({ width:100,height:100 },300,'linear');
第四个参数:运动结束的回调
$('.div').animate({ width:100,height:100 },300,'linear',function(){
    alert(1);
});

2)数值的运算操作

点击按钮每次宽度+100px

$('.btn').click(function(){
    $('.div').animate({ width: '+=100' },1000);//可以接受数值的操作,每次加100
});

3)配置参数step的使用

$('.btn').click(function(){
    $('.div1').animate({
        width:300
    },{
        duration: 1000,            // 时间
        easing: 'linear',        // 运行方式
        complete: function(){    // 回调函数
            alert(1);
        },
        step: function(a,b){        
            console.log(a);    // 可以监测我们定时器的每一次变化
            console.log(b);    // 运动的一种算法
            console.log(b.pos);    // 运动过程中的比例值(0~1)
        }
    });
});

/* 假如想让div里面的数字,从0到276453,可以用.pos来实现 */
$('.btn').click(function(){
    $('.div1').animate({
        num:'move'        // 不会起作用,但必须要有占位符,否则不会执行
    },{
        duration: 2000,            // 时间
        easing: 'linear',
        step: function(a,b){        
            $('.div1').html( parseInt(b.pos*276453) )
        }
    });
});

4)延迟操作delay();

让一个div的宽从100到200,延时1秒钟后高也从100到200

$('div').animate({width:200},1000).delay(1000).animate({height:200},1000);

4)停止运动stop();

$('.demo').stop();    // 默认情况下,只会停止当前运动(如果点击该按钮,如果停止宽度变化,进行高的变化,如果宽的变化玩,停止高,高会立即停止效果)
$('.demo').stop(true);    //第一个参数:可以停止所有的运动(立即停止宽,高度的动画不会执行)
$('.demo').stop(true,true);    //第二个参数:可以停止到当前指定的目标点(也不会响应高的动画)
$('.dmeo').finish();    // 立即完成所有动画(宽高都会立即执行)

stop()也有清空队列的行为

<input class="begin_btn" type="button" value="开始运动">
<input class="stop_btn" type="button" value="结束运动">
<div class="demo"></div>

// 默认情况下,只会停止当前运动
$('.begin_btn').click(function(){
    $('.demo').animate({width:200},1000).animate({height:200},1000);
});
$('.stop_btn').click(function(){
    $('.demo').stop();    // 默认情况下,只会停止当前运动(如果点击该按钮,如果停止宽度变化,进行高的变化,如果宽的变化玩,停止高,高会立即停止效果)
    $('.demo').stop(true);    //第一个参数:可以停止所有的运动(立即停止宽,高度的动画不会执行)
    $('.demo').stop(true,true);    //第二个参数:可以停止到当前指定的目标点(也不会响应高的动画)
    $('.dmeo').finish();    // 立即完成所有动画(宽高都会立即执行)
});
JSRUN notes