jQuery基础总结–jQuery动画(七)

继续接上篇jQuery基础总结–jQuery事件(六)

动画效果

动画效果也是jQuery吸引人的地方,通过jQuery动画方法,能够轻松的为网页添加精彩的视觉效果。

jQuery基础总结--jQuery动画(七)

参数说明

jQuery基础总结--jQuery动画(七)

自定义动画

为帮助用户解决部分高级的动画需求,jQuery为我们提供一套自定义动画方法animate();

语法:animate(params,speed,callback);

params:一个包含样式属性及值的映射

speed :速度参数

callback:在动画完成时执行的函数

例如:

  1. $(".yellow").bind("click",function(){
  2. $(this).animate({background:"#FFFFFF“,height:"+=100px"}
  3.         ,"slow",function(){
  4.             alert("动画执行完成");
  5.     });
  6. });

多重动画

通过将自定义动画和内置动画组合,我们还可以构建出多重动画效果。

例如:

  1. $(".yellow").bind("click",function(){
  2. $(this).animate({background:"#FFFFFF",height:"+=100px"}
  3.         ,"slow")
  4.         .animate({left:"500px"},3000)
  5.         .fadeOut("slow");
  6. });

停止动画

某些时候由于程序需求,我们需要停止正在进行的动画操作,这时候我们可以使用jQuery中的stop()和finish()方法。

语法:

stop([clearQueue][,gotoEnd]);

finish([gotoEnd]);

参数说明:

clearQueue,是否要清空未执行完的动画队列

gotoEnd,是否直接将正在执行的动画跳转到末态

其他动画方法

除了上面提到的动画方法,jQuery还提供了三个专门用于交互的动画方法。

1、toggle(speed[,callback])  切换元素的可见状态

2、sildeToggle(speed[,callback])  通过高度变化来切换匹配元素的可见性

3、fadeTo(speed,opacity[,callback])  调整元素的不透明度

未完待续...

下篇传送阵:jQuery基础总结–jQuery插件上(八)

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. avatar 五冶大学 3

    了解了,谢谢楼主~~~~

评论加载中...