JQuery 动画效果

//显示和隐藏 show()  hide() 方法也可以没有任何参数 只是显示和隐藏

$("#btnid").bind("click",function(){

     $("#divid").show("slow",function(){ //show方法用于显示元素 第一个参数是显示的速度,第二个参数是可选的 显示完成后执行该函数

         alert("哈哈哈");

});

});

$("#btnid").bind("dbclick",function(){

   $("#divid").hide("fast",function(){//hide方法用于隐藏元素 第一个参数是隐藏的速度,第二个参数是可选的 隐藏完成后执行该函数

       alert("嘿嘿嘿");

});

});

//toggle() 显示或隐藏

$("#btnid").bind("click",function(){  //为btn绑定click事件

         $("divid").toggle("fast",function(){  //如果div是隐藏的  点击按钮时div显示出来,如果div是显示的 点击按钮时div隐藏起来

              $(this).val()=="隐藏"?$(this).val("显示"):$(this).val("隐藏");  //设置btn的显示val

          });

});

//slideUp() 只用于已经显示的元素 向上滑动  slideDown() 只用于已经隐藏的元素 向下滑动

$("#btnid").bind("click",function(){

         if($(this).val()=="隐藏"){

              $("#divid").slideUp("fast",function(){  //把显示出来的div隐藏起来

                    $("#btnid").val("显示");      //隐藏之后把btn的val设置为显示

               });

        } else{

               $("#divid").slideDown("slow",function(){ //把隐藏的div显示出来

                    $("#btnid").val("隐藏");    //显示出来后把btn的val设置为隐藏

              });

             }  

});

//slideToggle()  向上或向下滑动

$("#btnid").bind("click",function(){

        $("#div").slideToggle("fast",function(){  //如果div是显示的则隐藏  隐藏的话则显示

              $("#btnid").val()=="向下滑动"?$("#btnid").val("向上滑动"):$("#btnid").val("向下滑动");

        });

});

//fadeIn() 淡入(加载显示) fadeOut() 淡出(隐藏)

$("#btnid").bind("click",function(){

         if($(this).val()=="淡入"){

               $("#divid").fadeIn("fast",function(){

                       $(this).val("淡出");

               });

          }   else{

                 $("#divid").fadeOut("fast",function(){

                          $(this).val("淡入");

                 });

            }

});

//fadeTo()  设置淡入淡出  透明

$("span").each(function(index){

         switch(index){

         case 0:

               $(this).fadeTo("fast",0.2,function(){    //第一个参数是淡入淡出的速度 第二个参数是透明度 0.0~1.0之间  第三个是回调函数(可选的参数)

                        alert("哈哈哈");     

                  });break;

        case 1:

               $(this).fadeTo("fast",0.5,function(){

                        alert("哈哈哈");     

                  });break;

         case 2:

               $(this).fadeTo("fast",0.9,function(){

                        alert("哈哈哈");     

                  });break;

         }

});

//animate() 自定义动画效果

$("span").animate({width:"80px",height:"80px"},3000,function(){  

                         //第一个参数可选 设置的样式 多个样式之间用逗号分隔开,第二个参数是动画的速度 以毫秒为单位，第三个参数是可选的  回调函数

          $("#divid").html("动画完成");

});

//animate() 移动位置

$("span").animate({width:"+=80px",height:"+=80px"},3000,function(){  //向右下角移动80px 80px

                         //第一个参数可选 设置的样式 多个样式之间用逗号分隔开,第二个参数是动画的速度 以毫秒为单位，第三个参数是可选的  回调函数

          $("#divid").html("动画完成");

});

//stop()方法停止动画事件

$("#divid").stop(false,false); //二个参数都是可选的 第一个表示是否停止当前的动画  第二个表示是否完成正在执行的动画

//delay()方法延迟动画时间

$("#divid").delay(2000); // 将div的动画延迟两秒  单位是毫秒