jQuery效果

隐藏和显示元素

//显示某个元素
$("p").show();
//隐藏某个元素
$("p").hide();
//带有参数（延时隐藏）
$("p").hide(1000);
//带有方法的隐藏
$("div").hide(1000,"linear",function(){
	alert("Hide() 方法已完成!");
});
//toggle方法（就是在隐藏和显示之间来回切换，中间同样可以加参数）
$("p").toggle();

淡入淡出

//淡入淡出有四种方法

//淡入
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);

//淡出
$("#div1").fadeOut();

//淡入淡出切换
$("#div1").fadeToggle();

//透明度切换（切换到指定的透明度）
$("#div1").fadeTo("slow",0.15);

滑动（默认给元素隐藏）

//下滑
 $("#panel").slideDown();
//上滑
$("#panel").slideUp();
//切换
$("#panel").slideToggle();

动画

这个主要就是animate函数操作各种属性

//元素向左移250像素
$("div").animate({left:\'250px\'});
//同时操作多个属性
$("div").animate({
	left:\'250px\',
	opacity:\'0.5\',
	height:\'150px\',
	width:\'150px\'
});
//使用相对值
$("div").animate({
	left:\'250px\',
	height:\'+=150px\',
	width:\'+=150px\'
});
//队列功能（这里就是这个元素按照顺序去执行这些属性）
$("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");
});

停止动画

这个就是停止当前的动画

$("#panel").stop();

链

使用链，我们可以把所有的动作和方法都链接到一起

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