jquery基础学习之动画效果

文章是从官网整理，方便学习可以随意装载不需要注明作者！

1基本效果

 1,show() 显示隐藏的匹配元素

   语法：  $("p").show()

 2,show(speed,fn),可控速度的显示隐藏的元素

   语法：  $("p").show("fast",function(){

               $(this).text("Animation Done!");

           });

   fast可以改成以毫秒为单位的数字，eg 3000

 3,hide() 隐藏显示的匹配元素

语法： $(“p”).hide()

 4,hide(speed,fn).可控速度的隐藏显示元素

    语法：  $("p").hide("fast",function(){

               $(this).text("Animation Done!");

           });

 5,toggle() 切换元素的可见状态，隐藏就显示，显示就隐藏

语法:  $("p").toggle()

 6,toggle(switch)根据switch的参数切换元素的可见状态（true为可见，false为隐藏）

   Eg:var flip = 0;

      $("button").click(function () {

         $("p").toggle( flip++ % 2 == 0 );

      });

  7,toggle(speed,fn) 可控的切换所有的匹配元素

      语法 ：$("p").toggle("fast",function(){

                 alert("Animation Done.");

              });

2 滑动效果

 1slideDown(speed,fn)是元素向下移动，在显示完成时触发一个回调函数

      语法：$("p").slideDown("fast",function(){

                alert("Animation Done.");

             });

 2 slideUp(speed,fn)使元素向上移动，先移动完成时触发一个回调函数

       语法：$("p").slideUp("fast",function(){

                alert("Animation Done.");

             });

 3 slideToggle(speed,fn) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后

   可选地触发一个回调函数。

3淡入淡出效果

  1fadeIn(speed,fn)通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成

   后可选地触发一个回调函数。

         语法：$("p").fadeIn("fast",function(){

                  alert("Animation Done.");

               });

  

     2fadeOut(speed,fn)和前一个相反的效果

         语法：$("p").fadeOut("fast",function(){

                    alert("Animation Done.");

                 });

     3fadeTo(speed,opacity,fn)调到一个指定的透明度

          语法：$("p").fadeTo("fast", 0.25, function(){

                    alert("Animation Done.");

                 });

4,自定义动画

 1,animate(params,duration,easing,fn)用于创建自定义动画的函数

        Eg  $("#right").click(function(){

                $(".block").animate({left: '+50px'}, "slow");

             });

             $("#left").click(function(){

                 $(".block").animate({left: '-50px'}, "slow");

             });

             $("p").animate({

                  height: 'toggle', opacity: 'toggle'

             }, "slow");

   2,stop(clearQueue,gotoEnd) 停止所有指定元素上正在进行的动画

        Eg  // 开始动画

               $("#go").click(function(){

                   $(".block").animate({left: '+200px'}, 5000);

               });

            // 当点击按钮后停止动画

               $("#stop").click(function(){

                   $(".block").stop();

               });

   3,delay (duration,queueName)

        Eg $('#foo').slideUp(300).delay(800).fadeIn(400);