jQuery 切换特效/动画效果

最新推荐文章于 2023-09-20 09:49:24 发布

herogus丶

最新推荐文章于 2023-09-20 09:49:24 发布

阅读量1.4k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/u013176571/article/details/70052968

版权

Java 专栏收录该内容

31 篇文章

订阅专栏

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>

运行结果：跳转到菜鸟教程