jquery中动态效果小结

所属分类: 网络编程 / JavaScript 阅读数: 258
收藏 0 赞 0 分享

动画效果,如果综合使用,还能使用简单的代码简单实现jquery的各种插件的效果

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

复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").show(); 参数缺省
// $("#t1").show("fast",callback); 显示速度为fast方式
$("#t1").show(3000,callback);//自定义显示速度 3000毫秒
};
$("#b1").click(f1);

Html代码
复制代码 代码如下:

<input type="button" value="show" id="b1"/> <div id="t1" style="display: none;border: 1px solid gray;">dd</div>

2 hidden(speed,callback);
说明:相反与show方法,用于隐藏元素,参数与show相同,请参考3.1
下面的例子是点击一个按钮,隐藏显示的div
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").hide(); 参数缺省
// $("#t1").hide("fast",callback); 显示速度为fast方式
$("#t1").hide(3000,callback);//自定义显示速度 3000毫秒
}; $("#b1").click(f1);

Html代码
复制代码 代码如下:

<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

3 toggle(speed,callback)
说明:这个可以理解为show()与hide()方法的结合体,轮换执行show()与hide()
比如:页面有一个隐藏的元素,第一次执行toggle(),显示元素,第二次执行,隐藏元素,第三次则又显示元素。。。
参数与3.1,相同
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
//$("#t1").toggle(); // 参数缺省
//$("#t1").toggle("fast",callback); //显示速度为fast方式
$("#t1").toggle(3000,callback);
};
$("#b1").click(f1);


Html代码
复制代码 代码如下:

<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

二.元素的滑动效果(向下展开,向上收缩)
1.slideDown(speed,[callback]);
说明:改变对象的height以实现向下展开的动画效果,常用与显示隐藏的元素
复制代码 代码如下:

var callback=function(){ //alert("我是回调函数"); }
var f1=function(){
//$("#t1").slideDown(); // 参数缺省
//$("#t1").slideDown("fast",callback); //显示速度为fast方式
$("#t1").slideDown(1000,callback);
};
$("#b1").click(f1);

Html代码
复制代码 代码如下:

<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

2.slideUp(speed,[callback]););

说明:改变对象的height以实现向上展开的动画效果,常用隐藏显示的元素
复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
}
var f1=function(){
//$("#t1").slideUp();
// 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式
$("#t1").slideUp(1000,callback);
};
$("#b1").click(f1);
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

3.slideToggle(speed,[callback]););

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

三 元素的淡入淡出效果

1.fadeIn(speed,[callback]); 

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

2.fadeOut(speed,[callback]);

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

 

3,fadeTo(speed,opactity,callback);

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

参数:speed,callback于上面介绍的其他动画方法参数相同,opactity参数表示透明度,取值范围为0-1

复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
} ;
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30%
};
$("#b1").click(f1);
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div>

四.自定义动画

 

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

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

 

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

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

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

                 callback---回调函数

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

下面是一个例子

复制代码 代码如下:

var callback=function(){
//alert("我是回调函数");
} ;
var par={ height:"70%" };
var f1=function(){
$("#t1").animate(par,1000,callback);
};

$("#b1").click(f1);

Html代码
复制代码 代码如下:

<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div>

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多