jquery简单特效2

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

jquery简单特效2

来源：易贤网阅读：1132 次日期：2014-08-13 16:43:26

温馨提示：易贤网小编为您整理了“jquery简单特效2”,方便广大网友查阅！

jquery第十七课,jquery特效处理2,对象的淡入淡出,还有就是自定义动画效果.这个自定义就得靠自己的脑子编特效了.

参考共用代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>jquery特效处理</TITLE>

$(function(){

});

</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技术专栏

上一篇：双图片渐隐渐显广告代码

下一篇：jQuery之ajax参数

易贤网手机网站地址：jquery简单特效2

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！