jQuery动画与特效

back>>

1. 显示与隐藏
    show(speed,[callback])与hide(speed,[callback])方法
    show()函数等价于$("p").css("display":"block")
    hide()函数等价于$("p").css("display":"none")
    speed有三个默认字符值：slow(0.6秒)，normal(0.4秒)，fast(0.2秒)

$(function() { 
            $("a").click(function() {//显示链接点击事件 
                $("img").show(3000, function() {//显示完成时执行的函数 
                    $(this).css("border", "solid 1px #ccc"); 
                }) 
            }) 
            $("img").click(function() {//显示图片的点击事件 
                $(this).hide(3000);//动画效果隐藏 
            }) 
}) 

 
    toggle()方法，自动切换元素的显示状态
    toggle(switch)，switch为true，显示元素，为false隐藏元素
    toggle(speed,[callback])

$(function() { 
            $("input:eq(0)").click(function() { //无参数方法 
                $("img").toggle(); 
            }) 
            $("input:eq(1)").click(function() { //根据参数switch显示 
                var intI = 0; 
                var blnA = intI > 1; //获取逻辑值 
                $("img").toggle(blnA); 
            }) 
            $("input:eq(2)").click(function() { //动画方式显示 
                $("img").toggle(3000, function() { 
                    $(this) //以动画方式显示,并执行回调函数 
                    .css({ "border": "solid 1px #ccc", "padding": "2px" }); 
                }); 
            }) 
}) 

 

2. 滑动
    slideDown(speed,[callback])，以动画效果将所选择元素的高度向下增大，元素的其它属性不发生变化。callback在动画效果结束后调用。
    slideUp(speed,[callback]) 以动画效果将所选择元素的高度向上减小
    slideToggle(speed,[callback])方法，会根据当前元素的显示状态，自动进行切换

$("img").slideUp(3000, function() { 
                        $Tip.html("关闭成功！"); 
}) 
$("img").slideToggle(3000, function() { 
                    $("img").css("border", "solid 1px #ccc"); 
}) 

 

3. 淡入淡出
    fadeIn(speed,[callback])通过改变元素的透明度，实现淡入效果，从0.0到1.0
    fadeout(speed,[callback])通过改变元素的透明效果，实现淡出效果，从1.0到0.0
    与show()和hide()相比，它仅改变元素的透明度，不改变元素的其它属性，而后者改变了元素的width和height属性。
    fadeTo(speed,opacity,[callback])将透明度指定到特定的值

img.fadeIn(3000, function() { 
    $tip.html("淡入成功！"); 
}) 
img.fadeTo(3000, 0.6); 

  
4. 自定义动画
    animate(params,[duration],[easing],[callback]) params表示用于制作动画效果的属性样式和值的集合，[duration]值为slow，normal，fast或自定义的数字。[easing]为动画插件使用，用于控制动画的表现效果，通常有linear和swing字符值。

    自定义动画一： 
    divFrame在3秒内，元素宽度变为20%，高度变为70px

$(function() { 
            $(".divFrame").click(function() { //div元素点击事件 
                $(this).animate({ //宽与高变化的动画效果 
                    width: "20%", 
                    height: "70px" 
                }, 
                 3000, function() { //动画完成后执行的回调函数 
                     $(this).css({ "border": "solid 3px #666" }) 
                     .html("变大了！"); 
                 }) 
            }) 
 }) 

 

    自定义动画二：移动位置 左移，右移

 $(function() { 
            $("input:eq(0)").click(function() { //左移按钮点击事件 
                //在3000毫秒内，以动画的形式.divList元素向左移动52个像素 
                $(".divList").animate({ left: "-=52px" }, 3000); 
            }) 
            $("input:eq(1)").click(function() { //右移按钮点击事件 
                //在3000毫秒内，以动画的形式.divList元素向右移动52个像素 
                $(".divList").animate({ left: "+=52px" }, 3000); 
            }) 
}) 

  

    自定义动画三：队列中的动画
    在指定的元素上指定一个以上的多个动画效果，以动画效果将宽高在原来的基础上增大一倍，然后再以动画的效果将宽高在原有的基础上减小一倍

$(function() { 
            $("div").click(function() { //div块单击事件 
                $(this) 
             .animate({ height: 100}, "slow") //第1列 
             .animate({ width: 100 }, "slow") //第2列 
             .animate({ height: 50 }, "slow") //第3列 
             .animate({ width: 50 }, "slow"); //第4列 
            }) 
}) 

 

    动画的停止和延时：
    stop([clearQueue],[gotoEnd])，停止所选元素中正在执行的动画，其中可选参数[clearQueue]是个布尔值，表示是否停止正在执行的动画。[gottoEnd]也是布尔值，表示是否立即完成正在执行的动画

    delay(duration,[queueName])设置一个延时值来推迟后续队列中动画的执行，duration为延时时间值，单位毫秒。[queueName]表示队列名词，即动画队列：

$(function() { 
            $("a:eq(0)").click(function() { //点击"开始"链接事件 
                $("img").slideToggle(3000); //"拉窗帘"方式切换图片 
            }) 
            $("a:eq(1)").click(function() { //点击"停止"链接事件 
                $("img").stop(); //停止正在执行的动画 
            }) 
            $("a:eq(2)").click(function() { //点击"延时"链接事件 
                $("img") //延时切换图片 
                .delay(2000) 
                .slideToggle(3000); 
            }) 
}) 

 

5. 自定义动画代替特定的动画效果
    - animate()代替hide()
    $("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600)
    等价于
    $("页面元素").hide(600)

    - animate()替代fadeOut()方法
    $("页面元素").animate({opacity:"hide"},600)
    等价于
    $("页面元素").fadeOut(600)

    - animate()替代slideUp()方法
    $("页面元素").animate({height:"hide"},600)
    等价于
    $("页面元素").slideUp(600)

    - animate()替代fadeTo()方法
    $("页面元素").animate({opacity:"0.8"},600)
    等价于
    $("页面元素").fadeTo(600,"0.8")

6. 动画效果浏览相册中的图片