码迷,mamicode.com
首页 > Web开发 > 详细

jquery中的动画

时间:2015-01-21 13:15:20      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

问题:queue()方法?

tip0:

jquery从1.9版本以上就不支持toggle()方法。

//    $("#panel h5.head").toggle(function(){
//     ...
//    },function(){
//     ... 
//    });

以上不支持!以下支持

//    $("#panel h5.head").click(function(){
//        $(this).next().toggle();
//    });

tip1:

用jquery做动画效果要求在标准模式下,否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tip2:

jquery 中的任何动画效果,都可以指定3种速度参数“slow”,“normal”,“fast”时长分别是”0.6秒“0.4秒”“”0.2秒“,当使用速度关 键字时要加引号,例如show("slow"),如果用数字则不需要引号,例如show(1000);即(1000毫秒)1秒钟内显示。

tip3:

callback回调函数适用于jquery所有动画效果方法,例如

    $("#element").slideDown("normal",function(){
        //在效果完成后做其他事情
    })

tip4

判断是否处于动画状态

   if(!$("#element").is(":animated")){
//       如果当前没有进行动画,则添加新动画
   }

tip5:

(1)一组元素上的动画效果

当在一个animate()方法中应用多个属性时,动画是同时发生的。

当以链式的写法应用动画方法时,动画是按顺序发生的(除非queue选项值为false)

(2)多组元素上的动画效果

默认情况下,动画都是同时发生的。

当以回调的形式应用动画方式时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的

注意:在动画方法中,其他非动画方法会插队,例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中或者queue()方法中。

这个判断方法在animate()动画中经常用到,需要特别注意。避免动画积累而导致的动画与用户的行为不一致。

1、show()和hide()

①注意hide()方法在将“内容”的display属性值设置为"none"之前,会记住原先的display属性值。当调用show()方法时,就会根据hide()方法记住的display属性值来显示元素。

③同时改变”内容“的高度、宽度和不透明度。

 $("#panel h5.head").toggle(function(){
     $(this).next().hide(600);
 },function(){
     $(this).next().show(600);
 })

2、fadeIn()和fadeOut()

只改变元素的不透明度。

3、slideUp()和slideDown()

只改变元素的高度。

4、animate()自定义动画

#panel{
    position: relative;
    width:100px;
    height: 100px;
    border: 1px solid #0050d0;
    background:#96e555;
    cursor: pointer;
}

注意:定义relative

①简单的动画

$("#panel").click(function(){
    $(this).animate({left:"500px"},300);
})

②累加、累减

$("#panel").click(function(){
        $(this).animate({left:"+=500px"},300);
    })

③多重动画

$("#panel").click(function(){
        $(this).animate({left:"500px",height:"200px"},300);
    })

④按顺序执行(推荐链式写法)

    $("#panel").click(function(){
//        $(this).animate({left:"500px"},300);
//        $(this).animate({height:"200px"},3000);
        $(this).animate({left:"500px"},300)
                .animate({height:"200px"},3000);
    })

⑤综合动画

    $("#panel").css("opacity","0.5"); //设置不透明度
    $("#panel").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) //
                .animate({top:"200px",width:"200px"},3000) //
                .fadeOut("slow");   //
//                .css("border","5px solid blue"); //④
//        ③是在②之后执行(只有是动画才加入到队列),但若改为④,css()方法并不会加入到动画队列中,而是立即执行。
//        想要css()加入队列,只要使用回调函数。
//                .animate({top:"200px",width:"200px"},3000,function(){
//                    $(this).css("border","5px solid blue");
//                })
    })

5、stop()停止动画

stop([clearQueue],[gotoEnd])

注意:两个参数Boolean值(ture或false)。clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否将正在执行的动画跳转到末状态。

如果是直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。

   $("#panel").hover(function(){
       $(this).stop()
               .animate({height:"150"},2000) //① 如果在此时触发了光标移除事件。stop()是立即停止①执行②③④;stop(true)是立即停止①清空②执行③④
           //stop(false,true)是立即跳到①的结束状态,并执行②③④;stop(true,true)是立即跳到①的结束状态清空②执行③④
               .animate({width:"300"},3000); //
   },function(){
       $(this).stop()
               .animate({height:"22"},2000) //
               .animate({width:"60"},3000); //
   })

注意:jquery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行动画队列最终状态的方法。

6、delay()延迟动画

    $("#panel").css("opacity","0.5");
    $("#panel").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)//
                .delay(1000) //执行完①后等待1s再执行②
                .animate({top:"200px",width:"200px"},3000) //
                .delay(2000) //执行完②后等待2s再执行③
                .fadeOut("slow"); //
    })

7、其它动画方法

toggle(speed,[callback]);

slideToggle(speed,[easing],[callback]);   //改变高度

fadeToggle(speed,[easing],[callback]);  //改变透明度

fadeTo(speed,opacity,[callback]);

    $("#panel h5.head").click(function(){
        $(this).next().toggle();
    });
//    相当于
//    $("#panel h5.head").toggle(function(){
//        $(this).next().hide();
//    },function(){
//        $(this).next().show();
//    });
    $("#panel h5.head").click(function(){
        $(this).next().slideToggle();
    });
//    相当于
//    $("#panel h5.head").toggle(function(){
//        $(this).next().slideUp();
//    },function(){
//        $(this).next().slideDown();
//    });
    $("#panel h5.head").click(function(){
        $(this).next().fadeToggle();
    });
//    相当于
//    $("#panel h5.head").toggle(function(){
//        $(this).next().fadeOut();
//    },function(){
//        $(this).next().fadeIn();
//    });
    $("#panel h5.head").click(function(){
        $(this).next().fadeTo(600,0.2);
    })

 

jquery中的动画

标签:

原文地址:http://www.cnblogs.com/zhaojieln/p/4238387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!