jquery基础教程之动画效果

jquery基础教程之动画效果

一、显示隐藏

1、show([speed,[easing],[fn]]) 显示隐藏的匹配元素。

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear",需要使用插件

      $('div').show(1000,function(){
        console.log("完成")
      })

2、hide([speed,[easing],[fn]]) 隐藏显示的元素

3、toggle([speed],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

$('div').toggle(100);

二、高度变化

1、slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素

2、slideUp([speed,[easing],[fn]]) 过高度变化（向上减小）来动态地隐藏所有匹配的元素

3、slideToggle([speed],[easing],[fn]) 切换高度变化

$("p").slideToggle("slow");

三、透明度

1、fadeIn([speed],[easing],[fn]) 淡入效果

2、fadeOut([speed],[easing],[fn]) 淡出效果

3、fadeToggle([speed,[easing],[fn]]) 淡入和淡出效果切换

    $("p").fadeToggle("slow")

四、animate

animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合，不支持color

  $("p").animate({
     left: 50, 
     opacity: 'show',
     height:200,
     marginLeft:100
   }, 500);

六、delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目。

$('#foo').slideUp(300).delay(800).fadeIn(400);