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",
                           http://www.bkjia.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的專欄