1.三组基本的动画

　　显示：show 、隐藏hide、滑入：slideUp、滑出：slideDown、滑入滑出切换：slideTpggle、淡入：fadeIn、淡出：fadeOut、淡入淡出切换：fadeToggle

　　1.1show([speed],[callback])

　　　　可选：speed-动画的持续时间，可以是毫秒，还可以是固定的字符串

　　　　可选：callback-回调函数，动画结束后执行

　　show()；不传任何参数  直接显示      最常用

　　show(1000)；传入1000 动画会在1秒内全部完成

　　show(1000,function(){alert("动画执行完毕")});

<style>

    div{

        width: 300px;

        height: 300px;

        background: pink;

        display: none

    }

</style>

<body>

<div class="box">

</div>

<script>

    $(function(){

    //    $("div").show();         //直接显示div

    // $("div").show(1000);            //显示div会在1s内完成

    $("div").show(1000,function(){

        alert("动画执行完毕了");

    });            //显示div会在1s内完成  随后会提示你动画执行完毕了

    });

</script>

</body>

　　1.2hide（[speed]，[callback]）    和show方法一样的参数效果

　　1.3 slideUp（隐藏）、slideDown（出现）和show方法一样的参数   （不传入参数的时候会默认为400ms     有滑动效果）slideToggle滑入滑出切换（效果一样的，只是会来回的切换）

　　1.4  fadeIn、fadeOut、fadeToggle：和slideUP...down一样的只是效果不一样。　　　　　　　

　　　　

　　

　　

Jquery 基本动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  10. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. ubuntu 12.04 安装node.js

    在 Ubuntu 12.04 安裝 Node.js 使用 nvm(Node Version Manage) 來安裝 node.js, 預先需要 curl, git, g++ : $ sudo apt- ...

  2. .net core 分布式配置中心

    github地址 https://github.com/wangchengqun/ratel 配置文件 数据同步端口 Server: ip: 127.0.0.1 port: 7890 浏览器访问 ht ...

  3. ArrayBlockingQueue源码解析（1）

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注意:在阅读本文之前或在阅读的过程中,需要用到ReentrantLock,内容见<第五章 Reentr ...

  4. Mysql 经典案例总结（学习之前需要有Mysql基础）01

    Sql 经典案例 gb 4.2 ** 1 检索记录 (1) 主要介绍 Sql的基本SELECT查询语句 使用 SELECT * from 表 查询数据 查询该表的每一列数据 * 代表所有的意思 也可以 ...

  5. BZOJ 5194--[Usaco2018 Feb]Snow Boots(STL)

    5194: [Usaco2018 Feb]Snow Boots Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 81  Solved: 61[Submi ...

  6. Django(框架、模板)

    day65 参考:https://www.cnblogs.com/liwenzhou/p/8296964.html Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间 ...

  7. 尝试利用slmail的漏洞来getshell

    作者:Joe   本文属于Arctic shell原创内容计划文章,转载请注明原文地址! 二进制,计算机才可以理解的低级语言,简单来说它是一种信号,用电信号为例,0就是断电,而1就是有电,这样子010 ...

  8. windows中eclipse调试hadoop

    下载eclipse:https://www.eclipse.org/downloads/eclipse-packages 下载hadoop eclipse插件:https://github.com/w ...

  9. 利用koa实现mongodb数据库的增删改查

    概述 使用koa免不了要操纵数据库,现阶段流行的数据库是mongoDB,所以我研究了一下koa里面mongoDB数据库的增删改查,记录下来,供以后开发时参考,相信对其他人也有用. 源代码请看:我的gi ...

  10. Swift5 语言参考(八) 模式

    模式表示单个值或复合值的结构.例如,元组的结构是两个元素的逗号分隔列表.因为模式表示值的结构而不是任何一个特定值,所以可以将它们与各种值匹配.例如,模式匹配元组和任何其他两元素元组.除了将模式与值匹配 ...