Jquery浅谈之讲解四

 

                  今天我接着上次和大家讨论一下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",

                           url:"sharme!login.action",//请求的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的