/**

              * 【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. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  2. parameter -- tWR

    http://www.samsung.com/global/business/semiconductor/file/product/tWR-0.pdf tWR: write recovery time ...

  3. HZOI20190906模拟39 工业，卡常，玄学

    题面:https://www.cnblogs.com/Juve/articles/11484209.html 工业: 推一个式子,AC 没有用组合数....推了2个多小时 我sbsbsbsbsbsbs ...

  4. python-基础-字符串-列表-元祖-字典

    1 字符串 1.1 下标和切片 1.2 切片 1.3 字符串常见操作 如有字符串mystr = 'hello world itcast and itcastcpp',以下是常见的操作 <1> ...

  5. Tensorflow通过CNN实现MINST数据分类

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = input_dat ...

  6. TZOJ 3042 切蛋糕(并查集)

    描述 KK是个心灵手巧的好姑娘,她做了一个大蛋糕请她的好朋友们来品尝.这个蛋糕分成n×n个正方形小格,每个小格包含一块水果.KK要把蛋糕切成若干块,显然她不会破坏任意一个小格.无聊的某同学在她切蛋糕时 ...

  7. Leetcode162. Find Peak Element寻找峰值

    示例 2: 输入: nums = [1,2,1,3,5,6,4] 输出: 1 或 5 解释: 你的函数可以返回索引 1,其峰值元素为 2:   或者返回索引 5, 其峰值元素为 6. 说明: 你的解法 ...

  8. leetcode 57 Insert Interval & leetcode 1046 Last Stone Weight & leetcode 1047 Remove All Adjacent Duplicates in String & leetcode 56 Merge Interval

    lc57 Insert Interval 仔细分析题目,发现我们只需要处理那些与插入interval重叠的interval即可,换句话说,那些end早于插入start以及start晚于插入end的in ...

  9. YOLO训练自己的数据集的一些心得

    YOLO训练自己的数据集 YOLO-darknet训练自己的数据 [Darknet][yolo v2]训练自己数据集的一些心得----VOC格式 YOLO模型训练可视化训练过程中的中间参数 项目开源代 ...

  10. C++ std::map用法简介

    #include "map" //引入头文件 初始化: std::map <int, std::string> _map1; //初始化 //c++11中引入的,可以直 ...