4、 jQuery 效果

4、 jQuery 效果

1、显示隐藏效果

（1）显示

 // show([speed,[easing],[fn]])
 $("div").show(1000, function() {
         alert(1);
     });

（2）隐藏

// hide([speed,[easing],[fn]])
$("div").hide(1000, function() {
          alert(1);
     });

（3）显示隐藏切换

// toggle([speed,[easing],[fn]])
$("div").toggle(1000); 

①参数都可以省略。

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

③easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

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

2、滑动效果

（1）下滑动

slideDown([speed,[easing],[fn]])

（2）上滑动

slideUp([speed,[easing],[fn]])

（3）滑动切换

slideToggle([speed,[easing],[fn]])

①参数都可以省略。

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

③easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

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

3、事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

// 鼠标经过
$(".nav>li").mouseover(function() {
    $(this).children("ul").slideDown(200);
 });

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

 // 鼠标离开
$(".nav>li").mouseout(function() {
      $(this).children("ul").slideUp(200);
 });

（3）事件切换hover([over,]out)是鼠标经过和离开的复合写法

// 复合写法
$(".nav>li").hover(function() {  //鼠标经过函数
    $(this).children("ul").slideDown(200);
}, function() {                 //鼠标离开函数
    $(this).children("ul").slideUp(200);
});

（4）如果只写一个函数，则鼠标经过和离开都会触发它

$(".nav>li").hover(function() {
  $(this).children("ul").slideToggle();
});

// 简洁版滑动下拉菜单
$(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
  });

4、动画停止排队

stop()

①动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

②stop() 方法用于停止动画或效果， 写到动画或者效果的前面， 相当于停止结束上一次的动画

5、淡入淡出效果

（1）淡入

fadeIn([speed,[easing],[fn]])

（2）淡出

fadeOut([speed,[easing],[fn]])

（3）淡入淡出切换

fadeToggle([speed,[easing],[fn]])

①参数都可以省略。

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

③easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

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

（4）渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

①speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

②opacity 透明度必须写，取值 0~1 之间。

③easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

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

6、自定义动画

animate(params,[speed],[easing],[fn])

①params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

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

③easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

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

$(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })