jQuery动画

一、jQuery动画

        1、显示与隐藏

显示与隐藏

show() 方法显示隐藏的被选元素

        jquery对象.show(参数1，参数2)

hide() 方法隐藏被选元素

        jquery对象.hide(参数1，参数2)

toggle() 方法切换元素的可见状态
        jquery对象.toggle(参数1,参数2)
          参数1：可选 持续时间 数字 (单位默认毫秒)/字符串(normal 400   fast 200   slow 600)
          参数2：可选  回调函数  动画执行完毕后调用的函数

$(".box h2").click(function () {
        var list = $(this).next(".list"); //当前点击的h2后的那一个ul
        list.toggle(200);
        list.show(5000, function () {
        $(this).hide(2000); //指向的是有动画的jquery对象
        });
        $(this).next(".list").hide(5000);
      });
    });

        2、滑上和滑下

滑上/滑下

slideUp() 方法以滑动方式隐藏被选元素
        jquery对象.slideUp(参数1,参数2)

slideDown() 方法以滑动方式显示被选元素
        jquery对象.slideDown(参数1,参数2)

slideToggle()方法在被选元素上进行slideUp()和slideDown()之间的切换
        jquery对象.skideToggle(参数1,参数2)
         参数1：可选 持续时间 数字 (单位默认毫秒)/字符串(normal 400   fast 200   slow 600)
         参数2：可选  回调函数  动画执行完毕后调用的函数

 $(".nav li").bind({
            mouseenter: function () {
                $(this).addClass("on");
                $(this).children(".subnav").stop().slideDown();
            },
            mouseleave: function () {
                $(this).removeClass("on");
                $(this).children(".subnav").stop().slideUp();
            },
        });

        3、淡入与淡出

淡入与淡出

fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见
        jquery对象.fadeIn(参数1,参数2)

fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏
        jquery对象.fadeOut(参数1,参数2)

fadeToggle()方法在fadeIn()和fadeOut()方法之间切换
        jquery对象.fadeToggle(参数1，参数2)

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值
        jquery对象.fadeTo(参数1，参数3，参数2)
            参数3：不透明度淡入或淡出到某一不透明
            参数1：可选  持续时间  数字(单位默认毫秒)/字符串(normal 400   fast 200  slow 600)
            参数2：可选  回调函数  动画执行完毕后调用的函数

$(".cal").click(function () {
        $(".box,.mask").fadeIn();
    });
$(".mask span").click(function () {
        $(".box,.mask").fadeOut();
    });

        4、自定义动画

自定义动画

animate() 方法执行 CSS 属性集的自定义动画
      jquery对象.animate(参数1，参数2，参数3)
        参数1：对象   css属性
        参数2：持续时间
        参数3：回调函数

 $(".box")
    .animate({ left: "800px" }, 2000)
    .animate({ top: "400px" });

        5、停止动画

停止动画

stop() 方法为被选元素停止当前正在运行的动画
        jquery对象.stop(参数1,参数2)
            参数1：可选 是否停止被选元素的所有加入队列的动画 ，布尔值 默认false
            参数2：可选  规定是否立即完成当前的动画  布尔值   默认是false

 $(".nav li").bind({
            mouseenter: function () {
                $(this).addClass("on");
                $(this).children(".subnav").stop().slideDown();
            },
            mouseleave: function () {
                $(this).removeClass("on");
                $(this).children(".subnav").stop().slideUp();
            },
        });

        6、延迟动画

延迟动画

delay() 方法对队列中的下一项的执行设置延迟
    jquery对象.delay(延迟时间)

$(".cal").click(function () {
        $(".box,.mask").delay(400).fadeIn();
    });