/**

              * 【JQ基础动画】

              *  show() 显示

              *  hide() 隐藏

              *  toggle() 切换

              *      默认无动画，如果要产生动画

              *      在括号内，添加毫秒数，可产生动画和控制动画的快慢

              *

              *  《滑动动画》

              *      slideDown() 滑动显示(下)

              *      slideUp()   滑动隐藏(上)

              *      slideToggle 滑动切换

              *          默认有动画，默认是400毫秒

              *   《淡入淡出动画》

              *      fadeIn()            淡入显示

              *      fadeOut()           淡出显示

              *      fadeToggle()        切淡

              *      fadeTo(时间,透明度)   设置透明度

              */

一.基础动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <script>

         $(function () {

            $('button:eq(0)').click(function () {

                $('img').show(1000);

            });

             $('button:eq(1)').click(function () {

                 $('img').hide(1000);

             });

             $('button:eq(2)').click(function () {

                 $('img').toggle(1000);

             });

         });

     </script>

 </head>

 <body>

    <button>显示</button>

    <button>隐藏</button>

    <button>切换</button><br/>

    <img src="data:images/1.gif" alt="">

 </body>

 </html>

二.滑动动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 200px;

            height: 400px;

            background-color: pink;

        }

    </style>

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

    <script>

        $(function () {

            $('button').eq(0).click(function () {

                 $('.box').slideDown();

            });

            $('button').eq(1).click(function () {

                 $('.box').slideUp();

            });

            $('button').eq(2).click(function () {

                 $('.box').slideToggle();

            });

        });

    </script>

</head>

<body>

    <button>显示</button>

    <button>隐藏</button>

    <button>切换</button>

    <br>

    <!--<img src="data:images/1.gif" alt="" width="150" height="440">-->

    <div class="box"></div>

</body>

</html>

三.淡入淡出动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .box{

             width: 200px;

             height: 400px;

             background-color: pink;

         }

     </style>

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

     <script>

         $(function () {

             $('button').eq(0).click(function () {

                  $('.box').fadeIn();

             });

             $('button').eq(1).click(function () {

                  $('.box').fadeOut();

             });

             $('button').eq(2).click(function () {

                  $('.box').fadeToggle(1000);

             });

             $('button').eq(3).click(function () {

                 $('.box').fadeTo(400,0.3);

             });

         });

     </script>

 </head>

 <body>

     <button>显示</button>

     <button>隐藏</button>

     <button>切换</button>

     <button>透明度</button>

     <br>

     <!--<img src="data:images/1.gif" alt="" width="150" height="440">-->

     <div class="box"></div>

 </body>

 </html>

四.自定义动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .main{

             width: 100px;

             height: 100px;

             background-color: pink;

             /*transition: all .4s;*/

         }

     </style>

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

     <script>

         $(function () {

                 /**

                  *  自定义动画(兼容IE678.)

                  *   其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题

                  *       移动端项目的时候，直接使用CSS3实现效果即可

                  *       PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数

                  *

                  *   有动画的属性：

                  *      值是数字的属性：（颜色，文本居中这些就实现不了）

                  *   核心函数

                  *      .animate({属性集合})

                  *

                  * */

                 //（颜色，文本居中这些就实现不了动画）

                 $('button').click(function () {

                     $('.main').animate({

                         "width":"300px",

                         "height":"300px",

                         "backgroundColor":"#f90",

                         "textAlign":"center",

                         "lineHeight":"300px"

                     },300);

                 });

         });

     </script>

 </head>

 <body>

 <button>动起来</button>

 <div class="main">

     文字行号

 </div>

 </body>

 </html>

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画的更多相关文章

  1. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  2. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  3. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  4. 用POP动画编写带富文本的自定义动画效果

    用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...

  5. ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation

    //=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...

  6. IOS启动页动画（uiview 淡入淡出效果 )2

    Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...

  7. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  8. iTween基础之CameraFade(摄像机淡入淡出)

    一.基础介绍:二.基础属性 原文地址: http://blog.csdn.net/dingkun520wy/article/details/50896420 一.基础介绍 CameraTexture: ...

  9. 【Flutter 实战】17篇动画系列文章带你走进自定义动画

    老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...

  10. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

随机推荐

  1. 方法的重写（override）两同两小一大原则：

    方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类方法访问权限.

  2. 【python之路45】tornado的用法 （三）

    参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.cookie用法补充 1.cookie的应用场景 浏览器端保存的键值对,每次访 ...

  3. Django项目：CRM(客户关系管理系统)--71--61PerfectCRM实现CRM学生上传作业

    # student_urls.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.conf.urls import url from bp ...

  4. python基础---递归函数 知识点自查填空题

    什么是递归函数:在函数中调()叫递归函数. 递归函数最大递归深度是997或998----是()设的限制. 注:如果递归次数太多,就不适合使用递归来解决问题. 递归的缺点: 占(). 递归的优点:会让代 ...

  5. springboot核心技术(二)-----自动配置原理、日志

    自动配置原理 配置文件能配置的属性参照 1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfiguration 2).@Enable ...

  6. 【DM642学习笔记三】flash的烧写

    ICETEK-DM642-PCI板上的29L008B芯片提供了8M位的Flash空间(访问地址空间是CE1,90000000h~90080000h).主要用于自启动功能和存储FPGA的配置数据. 一. ...

  7. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  8. Sublime svn 安装

    Ctrl + Shift + P  进入 install package 输入svn windows系统选择:TortoiseSVN (在此之前,请确保电脑上已经安装好了TortoiseSVN) li ...

  9. mysql过多sleep连接 修改timeout配置节约连接数 配置连接数

    数据库连接数量我设置了16384,最大值 ; 对于mysql8在设置一下这个 SET GLOBAL mysqlx_max_connections = ; 可以使用 命令查看自己的设置 SHOW var ...

  10. SEO中HTML标签权重列表

    网上流传很久的一份资料<SEO中HTML标签权重>,这里做一份备份. HTML标签权重分值排列 内部链接文字:10分 标题title:10分 域名:7分 H1,H2字号标题:5分 每段首句 ...