jquery中动态效果小结 |
|
本文标签：动态效果 动画效果，如果综合使用，还能使用简单的代码简单实现jquery的各种插件的效果 复制代码 代码如下: 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
说明：从前面一，二，三可以看到，元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果 ，组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果
自定义动画使用方法：animate(params,speed,callback); 参数说明：params---一组包含作为动画属性和最终值哦样式属性和其值的集合 speed----同前面介绍方法中的speed属性 callback---回调函数 注意：params的样式属性必须书写成驼峰形式，即比如margin-left应该些微marginLeft的形式 下面是一个例子 |
