jQuery 切換特效/動畫效果

1、 jQuery獲取 display的屬性值：

	function mfClick() {
			if($("#main-content").css("display") == 'none') {
				$("#main-content").css("display", "")
			} else if($("#main-content").css("display") == '' || $("#main-content").css("display") == 'block') {
				$("#main-content").css("display", "none")
			}
		}

或者 使用JS的方法：

document.getElementById("main-content").style.display

2、jQuery 文本切換/特效

前提：

		<link rel="stylesheet" type="text/css" href="../../common/aui-v2.1/css/aui.css" />
		<script type="text/javascript" src="../../common/js/angular.min.js"></script>

		<script src="../../common/js/jquery-ui.min.js"></script>

頁面代碼：

				<div id="main-info" class="aui-margin-l-15" οnclick="mfClick()">
					<i class="aui-iconfont aui-icon-info "></i>
					<span class="aui-text-info  aui-padded-l-5">什麼是我要挪車</span>
				</div>
				<div id="main-content" class="main-content" >
					洛陽城東桃李花，飛來飛去落誰家？ 
					<br> 洛陽女兒惜顏色，坐見落花長嘆息。 
					<br> 今年花落顏色改，明年花開復誰在？ 
					<br> 已見松柏摧爲薪，更聞桑田變成海。
					<br> 古人無復洛城東，今人還對落花風。
					<br> 年年歲歲花相似，歲歲年年人不同。
					<br> 寄言全盛紅顏子，應憐半死白頭翁。
				</div>

調用 方式：

<script type="text/javascript">
		function mfClick() {
			runEffect();
      			return false;
		}
	
		function runEffect() {
			// 大多數的特效類型默認不需要傳遞選項
			var options = {};
			// 運行特效
			$("#main-content").toggle("blind", options, 500);
		}
</script>

拓展：

<select name="effects" id="effectTypes">
  <option value="blind">百葉窗特效（Blind Effect）</option>
  <option value="bounce">反彈特效（Bounce Effect）</option>
  <option value="clip">剪輯特效（Clip Effect）</option>
  <option value="drop">降落特效（Drop Effect）</option>
  <option value="explode">爆炸特效（Explode Effect）</option>
  <option value="fold">摺疊特效（Fold Effect）</option>
  <option value="highlight">突出特效（Highlight Effect）</option>
  <option value="puff">膨脹特效（Puff Effect）</option>
  <option value="pulsate">跳動特效（Pulsate Effect）</option>
  <option value="scale">縮放特效（Scale Effect）</option>
  <option value="shake">震動特效（Shake Effect）</option>
  <option value="size">尺寸特效（Size Effect）</option>
  <option value="slide">滑動特效（Slide Effect）</option>
</select>

運行結果：跳轉到菜鳥教程