jQuery 效果 - 淡入淡出
2015-09-14 16:07
537 查看
jQuery Fading 方法
通过 jQuery,您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery 效果 - 滑动
实例
jQuery slideDown()演示 jQuery slideDown() 方法。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
演示 jQuery slideToggle() 方法。
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery 效果- 动画
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画,您需要从
jquery.com 下载
Color Animations 插件。
jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
实例
以下实例在隐藏效果完全实现后回调函数:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); }); }); }); </script> </head> <body> <button>隐藏</button> <p>我们段落内容,点击“隐藏”按钮我就会消失</p> </body> </html>
以下实例没有回调函数,警告框会在隐藏效果完成前弹出:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); alert("现在段落被隐藏了"); }); }); </script> </head> <body> <button>隐藏</button> <p>这是一个段落,内容很少</p> </body> </html>
相关文章推荐
- 使用jQuery查找注册到某个DOM对象的事件处理函数
- jQuery从服务器获取数据使用post(字典查询的功能),服务器端php返回数据
- jQuery 效果- 隐藏和显示
- 关于Jquery 序列化表单的注意事项
- 关于Jquery 序列化表单的注意事项
- jQuery ajax 同步失效?
- jquery for循环
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
- JQuery中的siblings()是什么意思
- jQuery执行脚本,在指定的div添加(附加)html代码
- JavaScript学习笔记8-jQuery表单选择器
- jQuery 语法
- javascript中的jQuery简单应用
- jQuery 教程
- JavaScript学习笔记8-jQuery表单对象属性过滤
- 用JQUERY为INPUT的TXT类型赋值及取值操作
- javascript 测试 jQuery
- jquery ajax beforeSend 提交等待问题
- jquery 序列化整个表单作为参数传到后台
- jquery 序列化整个表单作为参数传到后台