源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery中动态效果小结

  • 时间:2020-06-19 09:20 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery中动态效果小结
动画效果,如果综合使用,还能使用简单的代码简单实现jquery的各种插件的效果 本文参考《《浅谈jquery》一书,加以整理,并结合自己的实际经验而成,可以看做一个 学习手册吧 编辑的时候代码全乱了,重新整理了下,可能代码格式还是有点乱,请见谅 显示(show),隐藏(hide)与组合(toggle)效果 1.show(speed,callback); 说明:这个方法可以显示隐藏的元素,其中参数也缺省,即写成show()这种形式 speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,也可以自己指定数字(单位:毫秒) callback---回调函数 下面是一个简单的例子
[u]复制代码[/u] 代码如下:
var callback=function(){ //alert("我是回调函数"); } var f1=function(){ // $("#t1").show(); 参数缺省 // $("#t1").show("fast",callback); 显示速度为fast方式 $("#t1").show(3000,callback);//自定义显示速度 3000毫秒 }; $("#b1").click(f1);
Html代码
[u]复制代码[/u] 代码如下:
<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
[u]复制代码[/u] 代码如下:
var callback=function(){ //alert("我是回调函数"); } var f1=function(){ // $("#t1").hide(); 参数缺省 // $("#t1").hide("fast",callback); 显示速度为fast方式 $("#t1").hide(3000,callback);//自定义显示速度 3000毫秒 }; $("#b1").click(f1);
Html代码
[u]复制代码[/u] 代码如下:
<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,相同
[u]复制代码[/u] 代码如下:
var callback=function(){ //alert("我是回调函数"); } var f1=function(){ //$("#t1").toggle(); // 参数缺省 //$("#t1").toggle("fast",callback); //显示速度为fast方式 $("#t1").toggle(3000,callback); }; $("#b1").click(f1);
Html代码
[u]复制代码[/u] 代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
[b]二.元素的滑动效果(向下展开,向上收缩) [/b]1.slideDown(speed,[callback]); 说明:改变对象的height以实现向下展开的动画效果,常用与显示隐藏的元素
[u]复制代码[/u] 代码如下:
var callback=function(){ //alert("我是回调函数"); } var f1=function(){ //$("#t1").slideDown(); // 参数缺省 //$("#t1").slideDown("fast",callback); //显示速度为fast方式 $("#t1").slideDown(1000,callback); }; $("#b1").click(f1);
Html代码
[u]复制代码[/u] 代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>
2.slideUp(speed,[callback]);); 说明:改变对象的height以实现向上展开的动画效果,常用隐藏显示的元素
[u]复制代码[/u] 代码如下:
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();如果你是仔细看了上面的几个方法介绍,就应该知道怎么用了,其实这几个方法的用法和参数都是相同的,只是展现的形式不同,例子我就不写了吧 [b]三 元素的淡入淡出效果[/b] 1.fadeIn(speed,[callback]);  说明:实现淡出效果,用于显示隐藏元素 2.fadeOut(speed,[callback]); 说明:实现淡入效果,用于隐藏显示的元素   [b]3,fadeTo(speed,opactity,callback);[/b] 说明:该方法用于更改显示元素的透明度 参数:speed,callback于上面介绍的其他动画方法参数相同,[b]opactity[/b]参数表示透明度,取值范围为0-1
[u]复制代码[/u] 代码如下:
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>
[b]四.自定义动画[/b]
  说明:从前面一,二,三可以看到,元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果 ,组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果 [b][/b]  自定义动画使用方法:animate(params,speed,callback);  参数说明:params---一组包含作为动画属性和最终值哦样式属性和其值的集合                   speed----同前面介绍方法中的speed属性                  callback---回调函数        注意:params的样式属性必须书写成驼峰形式,即比如margin-left应该些微marginLeft的形式 下面是一个例子
[u]复制代码[/u] 代码如下:
var callback=function(){ //alert("我是回调函数"); } ; var par={ height:"70%" }; var f1=function(){ $("#t1").animate(par,1000,callback); }; $("#b1").click(f1);
Html代码
[u]复制代码[/u] 代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部