JQ中的运动

• show() , hide() , toggle()
  • fast normal slow
• fadeIn() , fadeOut() , fadeToggle()
  • 有默认的时间 normal
• slideDown() , slideUp() , slideToggle()
  • 有默认的时间 normal

show(), hide()

参数：

• 'fast': 200毫秒
• 'normal': 400毫秒
• 'slow: 600毫秒
• 也可以直接添加时间

效果: 改变透明度, 改变尺寸

<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="点击" id="input1">
<div id="div1"></div>
<script>
var onOff = true;
$('#input1').click(function(){      
    if(onOff){
        $('#div1').hide('slow');
    }
    else{
        $('#div1').show('fast');
        // $('#div1').show(1000);
    }   
    onOff =! onOff;
});
</script>

toggle()

show() hide() 的合体

$('#input1').click(function(){      
    $('#div1').toggle(600);
});

fadeIn() , fadeOut() , fadeToggle()

渐入渐出效果

有默认的时间 normal

slideDown() , slideUp() , slideToggle()

滑动动画

有默认的时间 normal

animate()

上面介绍的都是一些简单的动画,

我们可以用animate()自定义动画

参数:

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

$('#div1').animate({width: 300});
$('#div1').animate({width: 300}, 2000);
$('#div1').animate({width: 300}, 2000, 'linear');
$('#div1').animate({width: 300}, 2000, 'linear', function(){ alert(1) });

数值的运算操作

$('#div1').animate({width: '+=100'});//在原来的基础上加上100

参数的第二种写法

将后三个参数写在一个对象 {} 中 , 作为函数的第二个参数

$('#div1').animate({
    width: 300
}, {
    duration: 2000, 
    easing: 'linear',
    complete: function(){
        alert(1)
    }
})

队列的概念

思考一个问题:　下面三个动画是同时开始运动的吗？

$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);

答案：不是 是一个一个顺序执行的

animate()是一个异步函数

$('#div1').animate({width : 300},1000);
alert(1);

不会阻塞代码的运行

既然是异步, 为什么不是同时执行

因为animate函数的作用只是将运动加入到运动队列中

运动队列可以理解为一个数组 [ 运动1, 运动2, 运动3 ]

当运动1完成后, 才开始执行运动2

delay()

延迟

$('#div1').animate({width : 300},1000);
$('#div1').delay(1000);//上面运动执行完之后, 延时1000毫秒, 再执行后续运动
$('#div1').animate({height : 300},1000);

也相当与将延时加入运动队列

[运动1, 延时, 运动2]

链式写法

$('#div1').animate({width : 300},1000).delay(1000).animate({height : 300},1000);

停止运动

stop()

<style>
#div1{ width:200px; height:200px; background:red;}
</style>
<input type="button" value="点击" id="input1">
<input type="button" value="停止" id="input2">
<div id="div1"></div>



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

$('#input2').click(function(){
    //默认情况下 : 只会停止当前运动 
    //比如说［运动１，　运动２］, 我们现在正在运动１，　点击停止，　停止运动１到当前位置，然后运行运动2
    $('#div1').stop();

    //第一个参数 : 可以停止所有的运动　停止到当前位置
    $('#div1').stop(true);

    
    //第二个参数 : 可以停止到指定的目标点(当前的)
    $('#div1').stop(true,true); 

    
    //可以停止到指定的目标点所有的
    $('#div1').finish();

})
</script>

运动的队列问题

下面的这个例子当鼠标移入div变大　移出变小

$('#div1').mouseover(function(){
    
    $(this).animate({width:200,height:200});
    
}).mouseout(function(){
    
    $(this).animate({width:100,height:100});
    
});

当快速移入移出的时候，　就出现问题了

鼠标移出后，　运动依然没有停止

原因： 当快速的移入移出, 运动不断的被加入运动队列中, 运动被依次执行, 由于运动需要一定的时间, 所以出现了这种情况

我们可以用stop()方法来解决这个问题

stop() : 不但可以停止运动，还有清空队列的行为

$('#div1').mouseover(function(){
    
    $(this).stop().animate({width:200,height:200});
    
}).mouseout(function(){
    
    $(this).stop().animate({width:100,height:100});
    
});

• 例子 : 淘宝轮播图