jquery第十七课,jquery特效处理2,对象的淡入淡出,还有就是自定义动画效果.这个自定义就得靠自己的脑子编特效了.
参考共用代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery特效处理</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="javascript">
$(function(){
<!--www.forasp.cn jquery代码区-->
});
</SCRIPT>
<BODY>
<div id="www" style="display:none;">网站制作学习网>
<div id="foraspcn" style="background-color: #f00;height=100;width:300;">jquery特效处理</div>
</BODY>
</HTML>
3.淡入淡出效果.
(1).fadeIn(speed,[callback]);通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数.speed跟上一节一样有常规的"slow"0.6s,"normal"0.4s和"fast"0.2s.(下面的都一样),元素的其他属性不变.
jQuery实例:$("#www").fadeIn("slow");试试看,这样"网站制作学习网",由不显示(透明)逐渐变成显示(不透明)(0.6s).
$("#www").fadeIn("slow",function(){alert("网站制作学习网显示完毕")});当显示完成后,弹出"网站制作学习网显示完毕"对话框
(2).fadeOut(speed,[callback]);通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数,参数同上.
jQuery实例:$("#foraspcn").fadeOut(5000,function(){alert("特效fadeOut执行完毕")}); 效果5秒,jquery特效处理层从显示(不透明)到不显示(透明).完毕后弹出对话框.
(3).fadeTo(speed,opacity,[callback]);把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。参数同上.opacity表示透明度从0-1;0表示透明(不显示),1表示不透明(显示).比如0.5也就是透明度50%.
jQuery实例:$("#foraspcn").fadeTo("slow",0.5,function(){alert("变成半透明了把!")});
4.创建自定义动画
(1).animate(params, [duration], [easing], [callback]);用于创建自定义动画的函数<网站制作学习网Foasp.cn>
参数介绍:
params:一组包含作为动画属性和终值的样式属性和及其值的集合 比如{height:"100px",width:"200px"}
duration:也就是上面的speed,三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)可选
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".可选
callback:回调函数.可选.
在这里就举例一个,对于easing 是需要插件支持的.目前没有实用就不做easing例子了.
例子:
$("#foraspc").animate(
{height:"50px",width:"100px",opacity:"0.8"},
1000,
function(){alert("执行完毕")}
);
试试看效果.
(2).stop([clearQueue], [gotoEnd])停止所有在指定元素上正在运行的动画
$("#foraspcn").bind("click",function(){$("#www").stop();}); 当点击第二个div时,第一个层停止动作
(3).delay(duration, [queueName]);设置一个延时来推迟执行队列中之后的项目duration延时时间，单位：毫秒queueName队列名词，默认是Fx，动画队列。
举例:$("#foraspcn").slideUp(300).delay(800).fadeIn(400); 看看效果把.
5.jquery动画设置
BooleanjQuery.fx.off关闭页面上所有的动画
jquery简单的特效就讲完了.
更多信息请查看IT技术专栏