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. AJPFX平台：外汇的基本面分析

    AJPFX平台:开设外汇保证金交易账户以及入金之后,通常就可以开始交易了,但是在选择买卖时点时通常会依据两种分析,两种主要分析方法通常会被称为基本面分析和技术分析.基本面分析注重金融,经济理论和政局发 ...

  2. GoLang学习之数据类型

    数据类型 Go语言按类别有以下几种数据类型: bool,一个字节,值是true或者false,不可以用0或者1表示 int/uint(带符号为与不带符号位的int类型):根据平台不同是32位或者64位 ...

  3. 对drf的初步认识

    web应用模式 1.前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高. 这种应用模式比较适合纯网 ...

  4. [LeetCode]最长回文子串 java

    题目: 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000. 示例 1: 输入: "babad" 输出: "bab" 注意: ...

  5. ScreenOper

    /// <summary> /// 屏幕操作类 /// Add by 2017-07-25 /// 1.屏幕生成Image 方法 /// 2.Image按百分比压缩 方法 /// 3.Im ...

  6. python中大于0的元素全部转化为1，小于0的元素全部转化为0的代码

    [code] """ 大于0的元素全部转化为1 """ np_arr = np.array([[1 ,2, 3, 4]]) print(&q ...

  7. (转)shlex — 解析 Shell 风格语法

    原文:https://pythoncaff.com/docs/pymotw/shlex-parse-shell-style-syntaxes/171 这是一篇协同翻译的文章,你可以点击『我来翻译』按钮 ...

  8. 2014.10.5 再次学习LINUX

    mesg 发送信息给root y n write/talk 写消息给 wall 给所有用户发送消息 ps -aux ps -elF pstree 命令行跳转:CTRL+a行首 CTRL+e行尾 CTR ...

  9. ASP.NET Core 1.0 中 EntityFramework 与 PostgreSQL 的使用

    https://docs.efproject.net/en/latest/providers/npgsql/index.html 前面在CentOS6.7环境下配置好了PostgreSQL, 就顺便试 ...

  10. WTF小程序之原生遇见mpvue

    事情是这样的,我们有一个原生(wxml,wxss,js,json)写的小程序,要加入一个新的模块,并且时间比较紧张.所以我们选择了采用mpvue开发一个分包(subpackage),加入到原生小程序中 ...