jquery中动态效果小结_jquery_脚本之家

动画效果,如果综合使用,还能使用简单的代码简单实现jquery的各种插件的效果
本文参考《《浅谈jquery》一书,加以整理,并结合自己的实际经验而成,可以看做一个
学习手册吧
编辑的时候代码全乱了,重新整理了下,可能代码格式还是有点乱,请见谅
显示与组合效果 1.show;
说明:这个方法可以显示隐藏的元素,其中参数也缺省,即写成show()这种形式
speed —指定显示的速度 有3个参数可以选择 slow
,normal,fast,也可以自己指定数字 callback—回调函数 下面是一个简单的例子
复制代码 代码如下: var callback=function;
} var f1=function; 参数缺省 // $.show; 显示速度为fast方式
$.show;//自定义显示速度 3000毫秒 }; $; Html代码 复制代码 代码如下:

dd

2 hidden; 说明:相反与show方法,用于隐藏元素,参数与show相同,请参考3.1
下面的例子是点击一个按钮,隐藏显示的div 复制代码 代码如下: var callback=function; } var
f1=function; 参数缺省 // $.hide; 显示速度为fast方式
$.hide;//自定义显示速度 3000毫秒 }; $; Html代码 复制代码 代码如下:

dd

3 toggle 说明:这个可以理解为show方法的结合体,轮换执行show
比如:页面有一个隐藏的元素,第一次执行toggle(),显示元素,第二次执行,隐藏元素,第三次则又显示元素。。。
参数与3.1,相同 复制代码 代码如下: var
callback=function; } var f1=function.toggle.toggle; //显示速度为fast方式
$.toggle; }; $; Html代码 复制代码
代码如下:

dd

二.元素的滑动效果 1.slideDown;
说明:改变对象的height以实现向下展开的动画效果,常用与显示隐藏的元素
复制代码 代码如下: var callback=function;
} var f1=function.slideDown.slideDown; //显示速度为fast方式 $.slideDown;
}; $; Html代码 复制代码 代码如下:

dd

2.slideUp;
说明:改变对象的height以实现向上展开的动画效果,常用隐藏显示的元素 复制代码 代码如下: var callback=function; } var
f1=function.slideUp.slideUp; //显示速度为fast方式 $.slideUp; }; $;

dd

3.slideToggle;

说明:可以说是以上2个方法的综合体,可替代toggle();如果你是仔细看了上面的几个方法介绍,就应该知道怎么用了,其实这几个方法的用法和参数都是相同的,只是展现的形式不同,例子我就不写了吧

三 元素的淡入淡出效果

1.fadeIn;

说明:实现淡出效果,用于显示隐藏元素

2.fadeOut;

说明:实现淡入效果,用于隐藏显示的元素

3,fadeTo(speed,opactity,callback);

说明:该方法用于更改显示元素的透明度

参数:speed,callback于上面介绍的其他动画方法参数相同,opactity参数表示透明度,取值范围为0-1复制代码 代码如下: var callback=function; } ;
var f1=function.fadeTo;//0.3为透明度30% }; $;

dd

四.自定义动画

说明:从前面一,二,三可以看到,元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果

,组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果

自定义动画使用方法:animate(params,speed,callback);

参数说明:params—一组包含作为动画属性和最终值哦样式属性和其值的集合

speed—-同前面介绍方法中的speed属性

callback—回调函数

注意:params的样式属性必须书写成驼峰形式,即比如margin-left应该些微marginLeft的形式

下面是一个例子复制代码 代码如下: var
callback=function; } ; var par={ height:”70%” }; var
f1=function.animate; }; $; Html代码 复制代码 代码如下:

dd