---
# System prepended metadata

title: jQuery 效果
tags: [網頁設計, jQuery]

---

# jQuery 效果

<p style=color:red>toggle可利用botton控制物件隱藏或顯示 </p>

## 滑動、選單特效
#### slideDown()、slideUp() 、[slideToggle()](https://www.runoob.com/try/try.php?filename=tryjquery_slide_toggle) 

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

## 隱藏、顯示
#### hide()、show()、[toggle()](https://www.runoob.com/try/try.php?filename=tryjquery_toggle)


>script
```
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
```

## 淡入、淡出
####  fadeIn()、fadeOut()、[fadeToggle()](https://www.runoob.com/try/try.php?filename=tryjquery_fadetoggle)、 fadeTo()



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

