我們使用jquery的主要目的就是實現(xiàn)動畫，那么如何實現(xiàn)動畫垄分？

隱藏和顯示

瞬間隱藏和顯示

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

漸顯宛篇、隱

$("button").click(function(){
  $("p").hide(1000);
});

在兩種狀態(tài)間切換

$("button").click(function(){
  $("p").toggle();
});

淡入淡出

淡入

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

淡出

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});

狀態(tài)切換

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});

淡出的不同速度、程度

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

滑動

簡明語法

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

可選的 speed 參數(shù)規(guī)定效果的時長薄湿。它可以取以下值："slow"叫倍、"fast" 或毫秒〔蛄觯可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱吆倦。
向下滑動

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});

向上滑動

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});

折疊打開效果

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

自定義動畫

jQuery animate()

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

animate()接受一個字典類型的參數(shù)，該參數(shù)決定所選元素動畫結(jié)束時所處的狀態(tài)
動畫的值可以是 "show"坐求、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

并且所有的動畫按照動畫序列來做

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

停止動畫

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列蚕泽。默認是 false，即僅停止活動的動畫桥嗤，允許任何排入隊列的動畫向后執(zhí)行须妻。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫仔蝌。默認是 false。

當(dāng)然jquery語句也可以級聯(lián)調(diào)用

$("#p1").css("color","red").slideUp(2000).slideDown(2000);