jQuery效果

（一）隱藏和顯示

hide（）：隱藏

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

show（）:顯示

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

show（）和hide（）括號中可選的引數：規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可新增函式：隱藏或顯示完成後所執行的函式名稱。

$(function(){
  $(".btn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("div已消失");
    });
  });
});
 

toggle()：隱藏和切換自動切換

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

（二）淡入/淡出

fadeIn()：淡入

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

fadeOut():淡出

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

fadeToggle（）：淡入淡出切換

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

fadeTo（）：漸變為給定的不透明度

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

注意：fadeTo() 沒有預設引數，必須加上 slow/fast/Time

（三）滑動

slideDown()：向下滑動

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

slideUp()：向上滑動

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

slideToggle()：切換向上向下滑動

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

（四）動畫-animate（）

操作單個屬性

$(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});

操作多個屬性

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

相對於當前值變化

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

使用佇列：先執行完一個樣式，接著再執行一個樣式

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

stop（）--停止動畫

在stop（）中設定引數為true，是停止所有的動畫

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

在上述效果中有沒有回撥函式的區別

如以下的例項中，有回撥函式時，會再隱藏效果完成後再彈出警告框

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落現在被隱藏了");
  });
});

如以下的例項中，沒有回撥函式時，警告框會在隱藏效果完成前彈出

$("button").click(function(){
  $("p").hide(1000);
  alert("段落現在被隱藏了");
});