Jquery浅谈之讲解四

来源:岁月联盟 编辑:exp 时间:2012-03-17
今天我接着上次和大家讨论一下Jquery动画处理,在这里仅仅例举了一些比较常用的效果,对于其它的一些图形处理,我举荐大家可以采用HTML5来实现,不说其它的了,让我们走进Jquery的动画处理和ajax处理
                    $("div").next.show("slow/normal/fast(100ms)");//div这个对象的下一个对象的显示
                   一下是一个渐变的动画效果
                        $("#panel h5.head").toggle(function(){
                                $(this).next().fadeOut([500]);//可以动态的设置时间  单位毫秒
                        },function(){
                                $(this).next.fadeIn([1000]);//进入
                        });
 
                   收缩展开的效果
                       $().ready(function(){
                                $("#panel").toggle(function(){
                                                   $(this).slideUp(1000);
                              },fiunction(){
                                        $(this).slideDown(1000);
                              });
                      });
                                         
                 -----自定义css样式动画效果  animate 赋予生命,有活力的
                     $(function(){
                              $("#panel").click(function(){
                              //下面这个方法animate自定动画效果,[left:"500px"]//这里指的是多个名值对组合的css样式+=500表示,每点击都加500像素
                              //第二个参数是执行完所需要的时间为3000ms
                              //第三个参数就是回调函数,最后所要调用执行的函数
                               $(this).animate([left:"+=500px"],3000,function(){alert(3)});
                                       //animate([left:"500px",height:"300px"])
 
                              //第三种用法 ,方法链
                               $(this).animate([left:"500"],3000,function(){alert("first coming")})
                                 animate([top:"100"],300,function(){alert("second coming")}).css("background","red");
                              //第四种用法
                                 $(this).animate([left:"500"],3000).animate([top:"100"],300,function(){$(this).css("background","red")});
                                 });
                            })
----------------------------------------------AJAX请求------------------------------------------
                   $.ajax({
                           type:"get/post",
                           http://www.2cto.com/kf/201203/123609.html 请求的url
                            dataType:"html/xml/application/json", //响应文本数据格式
                           data:{"name":"sharme"},//json的格式的传入参数数据,在服务器可以通过getParameter来获取值
                             success:function(data){
                                        //这里是回调函数
                                }
                    });
 
            -------------------Jquery之简单AJAX请求
                    $.post("url",{name:parameter1,age:paramter2},function(return nData,status){
                                     //status 表示状态,成功就调用回调函数,成为为2.0
                                    if(status==2){
                                                   .......回调函数执行的代码段
                                      }
                     });
 
                    $.get("url",{json格式的参入参数},function(nData,status){
                                 if(status==2){
                                             alert(nData);
                                  }
                      });
 
   --注意:以前我们用Javascript开发的时候,可能时间处理通常都是以on..开头,但是在jquery中事件名是都没有on的 

摘自  sharme的专栏