专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > jQuery

jQuery 动画效果集锦

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
jQuery 动画效果汇总

1.动画方法说明

方法名 说明
hide()和show()方法 同时可修改多个样式属性,即高度,宽度,不透明度
fadeIn()和fadeOut()方法 只改变不透明度
slideUp()和slideDown()方法 只改变高度
fadeTo()方法 只改变不透明度
toggle()方法 用于替代hide()和show()方法,所以能修改高度、宽度、不透明样式
slideToggle()方法 用来代替slideUp()和slideDown()方法,所以只能改变高度
fadeToggle()方法 用来代替fadeIn()和fadeOut()方法,所以只能改变不透明度
animate()方法 属于自定义动画,以上各种动画的实质都是调用了animate()方法,此外,直接使用animate()方法还能定义其他的样式,如“left”“marginLeft”、“ScrollTop”等

    需要特别注意的是,animate()方法可以用来代替其他所有的动画。

  •    用animate()方法代替show()方法
     1 $("p").animate({height:"show",width:"show",opacity:"show"},400); 
     等价于:
      1 $("p").show(400); 
  • 用animate()方法代替fadeIn()方法
     1 $("p").animate({opacity:"show"},400);
     等价于:
      1 $("p").fadeIn(400); 

  • 用animate()方法代替slideDown()方法
     1 $("p").animate({height:"show"},400); 
     等价于:
      1 $("p").slideDown(400); 

  • 用animate()方法代替fadeTo方法
     1 $("p").animate({opacity:"0.6"},400); 
     等价于:
      1 $("p").fadeTo(0.6,400); 
  • 事实上,这些动画就是animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中,这些特定的样式属性值可以为“show”、“hide”、“toggle”,也可以是自定义的数字(值)
    2.动画队列
    (1) 一组元素上的动画效果

  • 当在一个animate()方法中应用多个属性时,动画会是发生;
  • 当以链式写法应用动画方法时,动画按照顺序 执行;
    (2)多组元素上的动画
  • 默认情况下,动画都是同时发生;
  • 当以回调函数形式应用动画方式(例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写入发哦动画方法的回调函数中),动画按照回调顺序执行。
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

  • jQuery搜索框输入文字下拉揭示菜单

    jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单 原文地址: http://www.jq22.com/jquery-info6193 ...

  • 7个替开发者准备的有用的jQuery技巧

    7个为开发者准备的有用的jQuery技巧 一、在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(fu...

  • jQuery获取呼应Input例子

    jQuery获取相应Input例子 页面上有许多input框,使用的是EasyUI样式,中间还参杂着各种其他无id的Input框,如下: <input class=...

  • webpack 引出jquery和第三方jquery插件

    webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。 index....

  • JQuery的开发与使用经验

    JQuery的开发与使用心得 关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和...

  • 深入学习jQuery卡通片控制

    深入学习jQuery动画控制 &times; 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话   jQuery动画可以使用fade、...

  • jquery操作table报表

    jquery操作table表格 一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...

  • html + css + jquery实现简略的进度条实例

    html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...

  • jquery中ajax方法的datatype的功用

    jquery中ajax方法的datatype的作用 今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...

  • jQuery菜单示范(全选,反选,取消)

    jQuery菜单示例(全选,反选,取消) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

热门推荐: