jQuery_动画

一.基本动画

show()

hide()
第一个参数：动画时长，可以是数字或者字符串，数字用毫秒表示，字符串只能为：“slow”，‘“normal”’，“fast”

第二个参数：动画完成后的要执行的函数。

第三个参数：指的是切换的效果，默认的是“swing”，可用的参数是‘’“linear”

eg：

$(document).ready(function () {
 $("div").css({
    'display': 'none',
    'height': '100px',
    'width': "300px",
    'background': 'gold'
        });
$('button').eq(0).click(function () {
// $('div').show(1000);       //毫秒为单位
// $('div').show('slow');     //毫秒为单位
 $('div').show(2000,function(){ 
   //动画完成之后执行的函数（操作）
   // alert('show动画执行完毕！')
 $('div').hide(1000);
  //动画展示完毕后关闭
  })
});
$('button:last').click(function () {
 //  $('div').hide(3000);
 //  $('div').hide('fast');
});
})

二.滑动
sildeDown()

sildeUp()

sildeToggle()

1.如果有两个参数：
第一个参数：时长
第二个参数：动画完成之后要执行的函数。
2.如果有三个参数：
第一个参数：时长
第二个参数：运动的显示效果：swing（运动先慢后快）linear（匀速）
第三个参数：动画完成后的执行函数
eg:

$(document).ready(function () {
  //设置div的默认样式
  $("div").css({
         'display': 'none',
         'height': '100px',
         'width': "300px",
         'background': 'gold'
      });
$("input[type='button']").click(function(){
        //     $('div').slideDown('slow');
        //      swing 是一个先慢后快的效果
        //      linear 是一个线性的效果
     $('div').slideDown('slow',"linear",function(){
});
})
$('button:eq(1)').click(function(){
          $('div').slideToggle(2000,'linear',function(){
});
})
})

三.淡入淡出
fadeIn()
fadeOut()
fadeTo()  淡入到某个透明度
fadeToggle()
eg:

$(document).ready(function(){
$("div").css({
   'display': 'none',
   'height': '100px',
   'width': "300px",
   'background': 'gold'
 });
$('button:eq(0)').click(function () {
     $('div').fadeIn(2000);
})
$('button:eq(1)').click(function(){
     $('div').fadeOut(2000);
})
$('button:eq(2)').click(function(){
     $('div').fadeToggle(2000);
})
//fadeTo的参数：
//第一个参数：时长
//第二个参数：透明度（0-1）
//第三个参数：动画完成执行额函数
$('button:eq(3)').click(function(){
  $('div').fadeTo(2000,0.5);//两秒钟后，透明度变为0.5
})
})

四.自定义
animate()
eg:

//自定义动画
        $('button:eq(4)').click(function(){
            $('div').animate({
            width:'500px',
            height:'500px',
            opacity:"0.5"
            background:"green"
    },2000)
})

五.停止动画
stop()

delay()

finish()

设置：
jQuery.fx.off

jQuery.fx.interval

stop 停止动画

$(document).ready(function(){
    $('.box>ul>li').mouseenter(function(){
             $(this).find('ul').stop().slideDown();
    });
    $(".box>ul>li").mouseleave(function(){
            $(this).find('ul').stop().slideUp();
    });
})

stop()有两个参数，第二个参数为true时，动画会在立即执行完，再执行后面的效果。
第二个参数为false时，动画不执行立即结束，执行后面的效果。
第一个参数：是否清空队列，如果为true，是清空队列，清空后面的动画不互执行
默认是false。
第二个参数表示是否立即执行完当前的动画，默认值为false，如果为true，表示立即执行完动画在执行后面的动画