您的位置:首页 > Web前端 > JQuery

jQuery 切换特效/动画效果

2017-04-11 17:29 639 查看
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" onclick="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>


运行结果:跳转到菜鸟教程
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: