jquery中动态效果

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

本文参考《《浅谈jquery》一书，加以整理，并结合自己的实际经验而成，可以看做一个 学习手册吧
编辑的时候代码全乱了，重新整理了下，可能代码格式还是有点乱，请见谅
显示（show），隐藏(hide)与组合（toggle）效果
1.show(speed,callback);

 

 

 

 

 

说明：这个方法可以显示隐藏的元素，其中参数也缺省，即写成show()这种形式

    speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,也可以自己指定数字（单位：毫秒）
    callback---回调函数

下面是一个简单的例子

Js代码

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

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

 

 

Html代码

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

<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

 

 

Js代码

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

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

 

Html代码

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

 

<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,相同

Js代码

1. var callback=function(){ //alert("我是回调函数");    
2. }   
3.  var f1=function(){   
4.  //$("#t1").toggle(); // 参数缺省    
5. //$("#t1").toggle("fast",callback); //显示速度为fast方式   
6.  $("#t1").toggle(3000,callback);    
7. };    
8. $("#b1").click(f1);   
9.   
10.   
11.    

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


 

 

Html代码

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

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

 

 

  二.元素的滑动效果（向下展开，向上收缩）

1.slideDown(speed,[callback]);

说明：改变对象的height以实现向下展开的动画效果，常用与显示隐藏的元素

 

 

Js代码

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

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

Js代码

1. $("#t1").slideDown(1000,callback);   
2.  };   
3.  $("#b1").click(f1);  

$("#t1").slideDown(1000,callback);
 };
 $("#b1").click(f1);

 

 

Html代码

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

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

 

 

 

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

说明：改变对象的height以实现向上展开的动画效果，常用隐藏显示的元素

 

 

Js代码

1. var callback=function(){    
2. //alert("我是回调函数");    
3. }   

var callback=function(){ 
//alert("我是回调函数"); 
} 

Js代码

1. var f1=function(){    
2. //$("#t1").slideUp();    
3. // 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式  

var f1=function(){ 
//$("#t1").slideUp(); 
// 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式

Js代码

1. $("#t1").slideUp(1000,callback);    
2. ;   
3. $("#b1").click(f1);   

 $("#t1").slideUp(1000,callback); 
};
 $("#b1").click(f1);

 

 

 

 

Js代码

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

<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

 

 

Js代码

1. var callback=function(){   
2.  //alert("我是回调函数");    
3. } ;   
4. var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30%    
5. };    
6. $("#b1").click(f1);  

var callback=function(){
 //alert("我是回调函数"); 
} ;
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30% 
}; 
$("#b1").click(f1);

 

Js代码

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

<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的形式

下面是一个例子

Js代码

1. var callback=function(){    
2. //alert("我是回调函数");    
3. } ;   
4. var par={ };    
5. var f1=function(){   
6.  $("#t1").animate(par,1000,callback);    
7. };    
8.   
9. $("#b1").click(f1);   
10.   
11.    

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

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

 

 

 

Html代码

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

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