JQuery入门(7)动画效果
来源:互联网 发布:画原画用什么软件 编辑:程序博客网 时间:2024/06/10 02:39
一、显示和隐藏
在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
hide()的语法形式:$(selector).hide(speed,callback);
show()的语法形式:$(selector).show(speed,callback);
speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast”或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称,两个参数都是可选的。
示例如下:
<script type="text/javascript">$(function(){ $("#hide").click(function(){ $("div").hide(1000); }); $("#show").click(function(){ $("div").show(1000); });})$(function(){//删除a标记中的href属性 $("#a1").removeAttr("href");})</script>...省略代码<h3>隐藏和显示</h3><input type="button" id="hide" value="点击隐藏"><input type="button" id="show" value="点击显示"><div>在夕阳下奔跑,那是我逝去的青春。</div>
二、淡入淡出
在jQuery中,可以实现元素的淡入淡出效果。jQuery提供了四种fade方法:fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度(值介于0与1之间)
fadeIn()语法:$(selector).fadeIn(speed,callback);
fadeOut()语法:$(selector).fadeOut(speed,callback);
fadeToggle()的语法:$(selector).fadeToggle(speed,callback);
fadeTo()的语法:$(selector).fadeTo(speed,opacity,callback);
示例如下:
<script type="text/javascript">$(function(){//fadeIn()方法 $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });})$(function(){//fadeOut()方法 $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });})$(function(){//fadeToggle()方法 $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });})$(function(){//fadeTo()方法 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });})</script>
三、滑动效果
在jQuery中,可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。
slideDown()语法:$(selector).slideDown(speed,callback);
slideUp()语法:$(selector).slideUp(speed,callback);
slideToggle()的语法:$(selector).slideToggle(speed,callback);
参数speed规定效果的时长,可以取值:”slow”、”fast”或毫秒。callback参数是滑动完成后所执行的函数名称。
示例如下:
<script type="text/javascript">$(function(){//slideDown()方法 $("button").click(function(){ $("#div1").slideDown("slow"); });})$(function(){//slideUp()方法 $("button").click(function(){ $("#div2").slideUp("slow"); });})$(function(){//slideToggle()方法 $("button").click(function(){ $("#div2").slideToggle("slow"); });})</script>
四、动画效果
在jQuery中,提供了animate()方法创建自定义的动画
语法:$(selector).animate({params},speed,callback);
params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数,前者规定效果的时长,取值为:”slow”、”fast”和毫秒;后者是动画完成后执行的函数名称。
示例如下:
<script type="text/javascript">$(function(){ //增加表单中所有属性为可用的元素类别 $("#btn").click(function(){ $("div").animate({ height:"200px", width: "660px" },"slow",function(){ $("div").animate({ height:"80px", width: "80px" },"slow") }); })})</script>
五、停止效果
在jQuery中,提供了stop()方法用于停止动画或效果,在它们完成之前。stop()方法适用于所有的jQuery效果函数,包括滑动淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd);
stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行;后者规定是否立即完成当前动画,默认是false。
所以默认地stop()会清除在被选元素上指定的当前动画
示例如下:
<script type="text/javascript">$(function(){ $("#flip").click(function(){ $("#panel").slideToggle(5000); }); $("#stop").click(function(){ $("#panel").stop(); });})</script><h3>动画效果</h3><button id="stop">停止滑动</button><div id="flip"> 点击这里,向下滑动面板</div><div id="panel"> Hello world!</div>
- JQuery入门(7)动画效果
- 【jQuery】jQuery 效果- 动画
- JQuery动画效果
- jQuery动画效果实现
- jquery动画效果
- JQuery动画效果
- JQuery动画效果
- JQuery动画效果
- jquery实现动画效果
- jquery 动画效果
- jquery动画与效果
- jQuery各种动画效果
- jQuery实现动画效果
- jQuery动画效果笔记
- JQuery的动画效果
- jQuery实现动画效果
- JQuery动画效果
- Jquery 下拉动画效果
- GitHub 上排名前 100 的 Objective-C 项目简介
- Linux Shell编程入门
- Spring 理解简化Java开发的几种策略
- Boost学习笔记 -- thread
- openCV
- JQuery入门(7)动画效果
- 在ecshop提交订单页的支付方式后面加图标的方法
- SVM入门(四)线性分类器的求解——问题的描述Part1
- (1.5.2.2)不要被阶乘吓倒
- hibernate entity 自定义 sequence
- SharePoint 列表应用实例 - 显示约束
- hiho 编程之美2015资格赛(回文字符序列-回文子序列数)
- Android异步加载全解析之引入二级缓存
- 创业的一些学习