幾種特效

一、顯示與隱藏show、hide

js寫法:

docment.getElementById("p1").style.display="block";

document.getElementById("p1").style.display="none";

JQuery顯示與隱藏的方法：

$("#p1").css("dislay":"block"); 轉化成模塊元素顯示

$("#p1").css("display":none);

eq:

$(function () {
var $link = $(".artList a");
var $hide = $(".artList :eq(2)"); //獲取需要顯示的文本
$link.click(function () {
if ($(this).html() == "顯示") {
$(this).html("隱藏");
$hide.show(5000);
}
else {
$(this).html("顯示");
$hide.hide(5000);
}
})
})

$("a").click(function(){
$("img").show(3000,function(){
$(this).css("border","solid 1px #ccc ");
})
})
$("img").click(function(){
$(this).hide(3000);
})

<a href="javascript:void(0)">顯示</a>
<img src="images/001.jpg"/>

二、toggle()方法

該方法優點是自動切換顯示狀態(不需要檢測當前的顯示狀態)

有三種調用格式：

toggle();

toggle(switch); 根據邏輯參數調用，switch當為true時顯示元素,當為false時隱藏元素

toggle(speed,[callback])

$("#Button1").click(function () {
$("img").toggle();
})
$("input:eq(1)").click(function () {
var intI = 0;
var blnA = intI > 1;
$("img").toggle(blnA);
})
$("#Button3").click(function () {
$("img").toggle(3000, function () {
$(this).css({ "border":"solid 1px #ccc","padding":"2px" });
})
})

JQuery特效與動畫總結