jQuery 学习3

 
这节课主要是学习jQuery的动态效果。
show()和hide()显示与隐藏方法，toggle()方法，fadeIn()谈入，fadeOut()谈出，slideDown()滑出，slideUp()滑入，animate()动画效果，stop()停止动画
 
w3c教程手册里有很好的解释，但很多同学依旧看不懂，行吧，那这里我们演示代码，看看效果，简单的学学这个东西：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery 学习3</title>

    <script src="../js/jquery-1.12.2.min.js"></script>

</head>

<body>

<button id="b">点击我切换div</button>

<div>我会被改变</div>

<!--这里我们用class，演示一次jQuery里的class写法-->

<p class="p2">点击我，就会隐藏我</p>

<button id="r">点击我，出现淡入效果</button>

<button id="u">点击我，淡出效果</button>

<!--给这个p元素设置css样式，让它先默认隐藏-->

<p id="ru" style="width: 100px;height: 100px;display: none"></p>

<br/><br/>

<button id="h1">点击我，出现滑入效果</button>

<button id="h2">点击我，滑出效果</button>

<!--给这个p元素设置css样式，让它先默认隐藏-->

<p id="hua" style="width: 100px;height: 100px;display: none"></p>

<br/><br/>

<button id="kai">开始动画</button>

<p id="dong" style="width: 100px;height: 100px;position: relative;"></p>

<br/><br/>

<button id="sh">停止动画</button>

<script>

    //我们点击button，运行下面的代码

    $("#b").click(function(){

        //toggle()方法是用来切换show()和hide()的，如果是隐藏则显示，是显示则隐藏

       $("div").toggle();

    });

    //我们点击class为p2的元素

    $(".p2").click(function(){

        //hide()方法是可以带参数的，有两个参数

        //第一个参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

        //第二个参数是隐藏或显示完成后所执行的函数名称

       $(this).hide(1000,dd());

        //调用dd()函数，然后1000是毫秒，则是1秒时间，隐藏该元素

    });

    function dd(){

        //被上面的函数调用，运行以下的代码

        alert('我被调用了');

    }

    //点击id为r的button元素，使id为ru的p元素出现淡入效果

    $("#r").click(function(){

        //fadeIn()方法则是淡入效果，后面跟了一个参数3000是毫秒，就是3秒以内慢慢出现

        $("#ru").fadeIn(3000);

    });

    //点击id为u的button元素，使id为ru的p元素出现淡出效果

    $("#u").click(function(){

        //fadeOut()方法则是淡出效果，后面跟了一个参数2000是毫秒，就是2秒以内慢慢出现

        $("#ru").fadeOut(2000);

    });

    //点击id为u的button元素，使id为ru的p元素出现淡出效果

    $("#h1").click(function(){

        //slideDown()方法则是滑出效果，后面跟了一个参数3000是毫秒，就是3秒以内慢慢出现

        $("#hua").slideDown(3000);

    });

    //点击id为u的button元素，使id为ru的p元素出现淡出效果

    $("#h2").click(function(){

        //slideUp()方法则是滑入效果，后面跟了一个参数2000是毫秒，就是2秒以内慢慢出现

        $("#hua").slideUp(2000);

    });

    //animate()动画效果，这个就比较难一点

    //默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。

    //如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

    $("#kai").click(function(){

        $("#dong").animate({

            left:'250px',

            height:'150px',

            width:'150px'

        },5000,dd());

        //animate()里面有三个参数，第一个是css样式

        //第二个和第三个同上面的一样，一个是时间控制，一个是调用函数

    });

    //stop()停止方法，可以停止以上效果，我们测试一个

    $("#sh").click(function(){

        $("#dong").stop();

        //就这样，就可以停止id为dong的这个元素了

    });

</script>

</body>

</html>
 
同学可以对着代码，测试功能。这些方法，都是可带参数的，除了stop()停止方法和animate()动画方法，其他的都可以带两个参数，第一个参数是时间控制，第二个参数是调用函数！animate()动画效果，它有三个参数，第二个是时间控制，第三个是调用函数，第一个则是多出的，css样式控制，改变效果。
这里要注意animate()动画方法，因为静态页面都是没办法移动的，要使用antmate()动画方法，就要给它一个postion定位，这样的话，就可以实现位移，做出动态特效。
stop()停止方法也是有两个参数，这个同学去w3c教程手册里去看看咯！
以上实战项目中，大多数可能遇到的并不多，但是遇到了，就可以做出这种动态效果，好看又好用，要考虑用户体验，总之显示隐藏太低调了，偶尔尝尝新花样！这些就比如可以用到二级菜单导航栏里。
 
希望我的教程能帮助到大家。
 

第二十一篇 jQuery 学习3 特效效果的更多相关文章

  1. 第二十三篇 jQuery 学习5 添加元素

    jQuery 学习5 添加元素   同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再 ...

  2. Python开发【第二十一篇】：Web框架之Django【基础】

    Python开发[第二十一篇]:Web框架之Django[基础]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...

  3. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  4. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  5. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  6. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  7. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  8. Python之路【第二十一篇】:JS基础

    JavaScript的基础学习(一) 一.JavaScript概述 1.1 JavaScript的历史 ● 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在 ...

  9. Python之路【第二十一篇】Django ORM详解

    ORM回顾 关系对象映射(Object Relational Mapping,简称ORM). django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表. 对于ORM框 ...

随机推荐

  1. java 百度地图判断两点距离2

    package baiduApi; public class BaiDuMap { static double DEF_PI = 3.14159265359; // PI static double ...

  2. [shell]上一个命令执行完成,才执行下一个操作 | shell脚本中判断上一个命令是否执行成功

    shell脚本中判断上一个命令是否执行成功  shell中使用符号“$?”来显示上一条命令执行的返回值,如果为0则代表执行成功,其他表示失败.结合if-else语句实现判断上一个命令是否执行成功. 场 ...

  3. Linux 服务器基本优化

    一:修改ulimit数 vi /etc/security/limits.conf 添加如下行: * soft noproc 65535 * hard noproc 65535 * soft nofil ...

  4. Redis ==> 集群的三种模式

    一.主从同步/复制 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会丢失(或少量丢失)数据,因为持久化会把内存中数据保存到硬盘上,重启会从硬盘上加载数据. 但是由于数据是存储在一台服务器 ...

  5. 内网gitlab访问外网

     外网要访问内网,内网出口必须有公网ip,且外网访问内部网络可以用花生壳,可以用主机端口映射  写ansible调api,打通内网到阿里云的master节点   如何将公司内网与云服务器内网打通 参照 ...

  6. React Native 安装

    第一 :在天朝如果你可以违规上网的话便可以按 react native 中文网的文档进行安装与调试.地址为:https://reactnative.cn/docs/getting-started.ht ...

  7. golang可见性规则（公有与私有，访问权限）

       Go语言没有像其它语言一样有public.protected.private等访问控制修饰符,它是通过字母大小写来控制可见性的,如果定义的常量.变量.类型.接口.结构.函数等的名称是大写字母开头 ...

  8. jvm的学习笔记：二、类的初始化，代码实战（4）

    当接口被初始化的时候,不要求其父类被初始化 System.out.println(MyChild5.c); 输出: MyChild5 1 依据:new Random().nextInt(3)并非编译区 ...

  9. tcl的第二个脚本

    set val(chan) Channel/WirelessChannel ;#Channel Typeset val(prop) Propagation/TwoRayGround ;# radio- ...

  10. postman Tests断言

    摘要:关于postman的断言方法很多,在网上随便搜寻下,能搜出一大推,什么牛鬼蛇神都有,让人眼花缭乱..甚至在应用时出现错误.Test断言都是根据js规则来写的,对于我这种不懂js语言的来说确实不友 ...