jQuery 切换特效/动画效果
2017-04-11 17:29
639 查看
1、 jQuery获取 display的属性值:
或者 使用JS的方法:
2、jQuery 文本切换/特效
前提:
页面代码:
调用 方式:
运行结果:跳转到菜鸟教程
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>
运行结果:跳转到菜鸟教程
相关文章推荐
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery 特效:盒子破碎和移动动画效果
- jquery实现初次打开有动画效果的网页TAB切换代码
- JQuery图片切换动画效果
- 【jQuery】调用toggle()方法实现动画切换效果
- jQuery的动画效果以及图片切换实例
- jQuery插件Slider Revolution实现响应动画滑动图片切换效果
- jquery带动画效果幻灯片特效代码
- jquery上下页面视差滚动切换效果|强大的视差响应动画滑动图片切换效果
- jquery学习之tab切换及动画效果,涉及animate(),siblings()
- jQuery的animate函数实现图文切换动画效果
- 4款基于jquery的列表图标动画切换特效
- jQuery实现切换页面过渡动画效果
- JQuery 淡出、 动画、显示/隐藏切换等效果
- jquery淡化版banner异步图片文字效果切换图片特效
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- jQuery插件slicebox实现3D动画图片轮播切换特效
- jQuery动画效果图片轮播特效
- 动画特效十五:网易新闻之头部导航切换效果