<!DOCTYPE html>

<html>

  <head>

    <title>test1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

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

                //显示

                //show()

                //$("#pic").show(3000);

                //fadeIn()

                //$("#pic").fadeIn();

                //slideDown()

                //$("#pic").slideDown();

            });

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

                //隐藏

                //hide

                //$("#pic").hide(3000);

                //fadeOut()

                //$("#pic").fadeOut();

                //slideUp

                //$("#pic").slideUp();

            });

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

                $("#pic").toggle();

            });

        });

    </script>

  </head>

  <body>

    <button id="aa">show</button>

    <button id="bb">hide</button>

    <button id="cc">toggle</button><br>

    <img src="../images/6.jpg" name="picture" id="pic" style="display:none">

  </body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <title>test2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

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

                $("#pic").animate({left:"+=300px"},3000)

                         .animate({top:"+=300px",height:"500px"},3000,function(){

                    $(this).css({opacity:"0.5"});

                });

            });

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

                //$("#pic").stop();     //暂停当前的，执行下一个动画

                //$("#pic").stop(true);  //清除队列

                //$("#pic").stop(true,true);//直接到达目前动画的末状态

                $("#pic").stop(false,true);

            });

        });

    </script>

  </head>

  <body>

    <button id="aa">go</button>

    <button id="bb">out</button><br>

    <img src="../images/6.jpg" name="picture" id="pic" style="position: absolute;">

  </body>

</html>

JQuery中的动画（ppt）的更多相关文章

  1. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  2. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. jQuery笔记（四）jQuery中的动画

    jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

  7. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  8. JQuery中的动画

    一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...

  9. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  10. jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

随机推荐

  1. JS中this的指向问题（读书笔记纯手打~）

    一.this JavaScrip的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境. 二.this的指向 根据运用情景可分为四类: 1.作为对 ...

  2. word使用宏 在文章中插入源代码进行排版

    1.宏的代码如下. Sub 设置代码表格() ' author: code4101 ' 设置代码表格 宏 ' ' ' 背景色为morning的配色方案,RGB为(229,229,229) ) With ...

  3. vivo面试学习3（git和svn的区别）

    git和svn有什么区别? svn: 系统特点: 1).集中式版本控制系统(存在一个中央版本库,所有开发人员所使用的代码都是来源于版本库,提交代码也是这个中央版本库) 2).企业内部并行集中开发 3) ...

  4. 在Idea中使用Eclipse编译器

    Eclipse编译器对Javac编译器的优点如下: 1.Proceed on errors 如果使用Javac编译器,你除了在执行之前修复所有错误之外没有其它的选择.然而Eclipse编译器却可以不管 ...

  5. JVM 性能排查--查看哪个对象占用内存大

    参考:http://blog.csdn.net/chenleixing/article/details/44227327/ 1．  在IE地址栏中输入:http://localhost/test/in ...

  6. 【Foreign】朗格拉日计数 [暴力]

    朗格拉日计算 Time Limit: 10 Sec  Memory Limit: 128 MB Description Input Output 仅一行一个整数表示答案. Sample Input 5 ...

  7. poj3580 序列之王 fhqtreap

    fhqtreap的写法 操作其实都差不多哇 #include<cstdio> #include<cstring> #include<algorithm> using ...

  8. [BZOJ1602&BZOJ1787&BZOJ2144]树上LCA的算法巩固练习

    简述求LCA的倍增算法 对于树上的所有节点,我们可以很轻松地通过dfs求出其直接的父亲节点以及其深度 通过类似RMQ的原理我们可以处理出每个节点的第2^i个父亲 //这个过程既可以在dfs之后双重循环 ...

  9. R的农场

    R的农场 题目描述 最近,R 终于获得了一片他梦寐以求的农场,但如此大的一片农场,想要做好防卫工作可不是一件容易的事.所以 R 购买了 N 个守卫,分别让他们站在一定的位置上(守卫不可移动,同一位置上 ...

  10. [bzoj3990][SDOI2015]排序-搜索

    Brief Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<= ...